@charset "utf-8"; .warp-big-title { position: relative; } .ny-open { position:absolute; right:0; top:-30px } .newyear2017 { position: fixed; z-index: 999; top:-1920px; left: 0; background: url(bb.png) repeat; opacity:0 } .newyear2017 .bg-l{ background:url(bg-l.png) no-repeat 0 0; width:435px; height: 1080px; position: absolute; left:-100px; z-index: 200; opacity:0 } .newyear2017 .bg-r{ background:url(bg-r.png) no-repeat 0 0; width:435px; height: 1080px; position: absolute; right:-100px; z-index: 200; opacity:0 } .newyear2017 .bg-b{ background:url(bg-b.png) no-repeat 0 0; width:1920px; height:133px; position: absolute; bottom:0; left:0;; z-index: 100; opacity:0 } .newyear2017 .c-l{ background:url(c-l.png) no-repeat 0 0; width:477px; height:386px; position: absolute; top:50%; margin-top: -50px; left:-50px; opacity:0 } .newyear2017 .c-r{ background:url(c-r.png) no-repeat 0 0; width:436px; height:406px; position: absolute; top:50%; margin-top: -250px; right: -50px; opacity:0 } .newyear2017 .ny-content { position: absolute; left:50%; margin-left:-393px; z-index: 300; top:30px; opacity:0; width:787px } .newyear2017 .ny-content .title{ width:787px; height:340px; background:url(title.png) no-repeat 0 0 } .newyear2017 .ny-content p{ color:#fff; text-align: center; font-size:48px; text-shadow: 0 3px 3px #000 } .ny-content .q-btn { text-align: center } .ny-content .q-btn a{ display: inline-block; background:#ff2a39; color:#fff; font-size: 18px; padding:20px 30px; cursor: pointer; border:1px solid #ff2a39 } .ny-content .q-btn a:hover{ text-decoration: none; background:#fe404d; border:1px solid #fff; color:#ddd } /*动画*/ .ny-content .animation{ position:absolute; opacity:0 } .newyear2017.show{ top:0 } .newyear2017 .bg-b{ transition: all 0.8s ease-out 0s; transform: translateY(60px); transition-delay: 0.3s; } .newyear2017 .ny-content{ transition: all 0.8s ease-out 0s; transform: translateY(-60px); transition-delay: 1s; } .newyear2017 .bg-l{ transition: all 0.8s ease-in 0s; transform: translateX(-70px); } .newyear2017 .bg-r{ transition: all 0.8s ease-in 0s; transform: translateX(70px); } .newyear2017 .c-l{ transition: all 0.8s ease-in 0s; transform: translateX(-70px); transition-delay: 0.5s; } .newyear2017 .c-r{ transition: all 0.8s ease-in 0s; transform: translateX(70px); transition-delay: 0.7s; } .newyear2017.show { opacity:1 } .newyear2017.show .bg-b{ transform: translateY(0px); opacity:1; } .newyear2017.show .ny-content{ transform: translateY(0px); opacity:1; } .newyear2017.show .bg-l{ transform: translateX(0px); opacity:1; } .newyear2017.show .bg-r{ transform: translateX(0px); opacity:1; } .newyear2017.show .c-l{ transform: translateX(0px); opacity:1; } .newyear2017.show .c-r{ transform: translateX(0px); opacity:1; }