css3实现舞台灯管效果
Document
.pr{position:relative}
.banner{background:#170f1c;overflow:hidden}
.bannerimg{width:100%}
.bannerul{position:absolute;right:50%;top:50%;margin-right:-32%;margin-top:10%;width:30%;color:#fff;text-align:center}
.bannerulli{width:20%;display:inline-block;margin-right:3%;line-height:30px;font-size:18px}
.bannerulli:nth-child(1)img{animation:rollIn1s;-webkit-animation:rollIn1s}
.bannerulli:nth-child(2)img{animation:rollIn2s;-webkit-animation:rollIn1.4s}
.bannerulli:nth-child(3)img{animation:rollIn3s;-webkit-animation:rollIn1.8s}
.bannerulli:nth-child(4)img{animation:rollIn3s;-webkit-animation:rollIn2.2s}
.hoverlight{
cursor:pointer;
position:absolute;
left:0px;
bottom:-10%;
width:20%;
height:200%;
background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
animation:light_move5s2sinfinitelinear;
-webkit-animation:light_move4.5s2sinfinitelinear;
transform-origin:0bottom;
-webkit-transform-origin:0bottom;
}.hoverlight1{
cursor:pointer;
position:absolute;
left:90%;
bottom:-30%;
width:10%;
height:200%;
background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
background-image:-ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
animation:light_move15s4sinfinitelinear;
-webkit-animation:light_move14.5s2sinfinitelinear;
transform-origin:0bottom;
-webkit-transform-origin:0bottom;
}
@keyframesbounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-5px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,-4px,0)}}
@keyframesrollIn{0%{opacity:0;transform:translate3d(100%,0,0)rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframesrollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)rotate(-120deg)}}
@keyframesrotate{
0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}
50%{-webkit-transform:rotate(360deg);-moz-transform:rotate(90deg);transform:rotate(360deg);}
100%{-webkit-transform:rotate(0deg);-moz-transform:rotate(90deg);transform:rotate(0deg);}
}
@keyframesrubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.move{
-webkit-animation:movement3slinearnormalbothinfinite;
-o-animation:movement3slinearnormalbothinfinite;
animation:movement3slinearnormalbothinfinite;
}
.move1{
-webkit-animation:movement13slinearnormalbothinfinite;
-o-animation:movement13slinearnormalbothinfinite;
animation:movement13slinearnormalbothinfinite;
}
.move2{
-webkit-animation:movement23slinearnormalbothinfinite;
-o-animation:movement23slinearnormalbothinfinite;
animation:movement23slinearnormalbothinfinite;
}
.move3{
-webkit-animation:movement33slinearnormalbothinfinite;
-o-animation:movement33slinearnormalbothinfinite;
animation:movement33slinearnormalbothinfinite;
}@keyframesmovement{
0%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(6px,10px);transform:translate(6px,10px);}
75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);}
100%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);}
}
@-webkit-keyframesmovement{
0%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(6px,10px);transform:translate(6px,10px);}
75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);}
100%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);}
}
@keyframesmovement1{
0%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(-6px,-10px);transform:translate(-6px,-10px);}
75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);}
100%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
}
@-webkit-keyframesmovement1{
0%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(-6px,-10px);transform:translate(-6px,-10px);}
75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);}
100%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
}
@keyframesmovement2{
0%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);}
100%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);}
}
@-webkit-keyframesmovement2{
0%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);}
25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);}
50%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);}
75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);}
100%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);}
}@keyframesmovement3{
0%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);}
25%{-webkit-transform:translate(-4px,6px);transform:translate(-4px,6px);}
50%{-webkit-transform:translate(2px,8px);transform:translate(2px,8px);}
75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);}
100%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);}
}
@-webkit-keyframesmovement3{
0%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);}
25%{-webkit-transform:translate(-4px,6px);transform:translate(-4px,6px);}
50%{-webkit-transform:translate(2px,8px);transform:translate(2px,8px);}
75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);}
100%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);}
}
@keyframeslight_move{
0%{transform:rotate(0deg);opacity:0}
30%{transform:rotate(40deg);opacity:1}
75%{transform:rotate(90deg);}
100%{transform:rotate(0deg);}
}@-webkit-keyframeslight_move{
0%{-webkit-transform:rotate(0deg);opacity:0}
30%{-webkit-transform:rotate(40deg);opacity:1}
75%{-webkit-transform:rotate(90deg);}
100%{-webkit-transform:rotate(0deg);}
}@keyframeslight_move1{
0%{transform:rotate(0deg);opacity:0}
30%{transform:rotate(-40deg);opacity:1}
75%{transform:rotate(-90deg);}
100%{transform:rotate(0deg);}
}@-webkit-keyframeslight_move1{
0%{-webkit-transform:rotate(0deg);opacity:0}
30%{-webkit-transform:rotate(-40deg);opacity:1}
75%{-webkit-transform:rotate(-90deg);}
100%{-webkit-transform:rotate(0deg);}
}