css3实现舞台灯管效果

2018-03-24   阅读:2763   分类:前端    标签: style

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<div class="head pr">    
    <a href="" target="_blank">    
      <img src="images/banner_01.jpg" alt="">     
      <i class="hoverlight"></i>
      <i class="hoverlight1"></i>     
    </a>       
</div>    
 <style>.pr{ position: relative}
.banner{ background: #170f1c; overflow: hidden}
.banner img{ width: 100%}
.banner ul{ position: absolute; right:50%; top:50%; margin-right: -32%; margin-top:10%; width:30%; color: #fff; text-align: center }
.banner ul li{ width: 20%; display: inline-block; margin-right: 3%; line-height: 30px; font-size: 18px}
.banner ul li:nth-child(1) img{ animation:rollIn 1s; -webkit-animation: rollIn 1s }
.banner ul li:nth-child(2) img{ animation:rollIn 2s; -webkit-animation: rollIn 1.4s }
.banner ul li:nth-child(3) img{ animation:rollIn 3s; -webkit-animation: rollIn 1.8s }
.banner ul li:nth-child(4) img{ animation:rollIn 3s; -webkit-animation: rollIn 2.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_move 5s 2s infinite linear;
  -webkit-animation: light_move 4.5s 2s infinite linear;
  transform-origin:0 bottom;
  -webkit-transform-origin:0 bottom;
}.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_move1 5s 4s infinite linear;
  -webkit-animation: light_move1 4.5s 2s infinite linear;
  transform-origin:0 bottom;
  -webkit-transform-origin:0 bottom;
}
@keyframes bounce{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)}}
@keyframes rollIn{0%{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(-120deg)}}
@keyframes rotate{
  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);}
}
@keyframes rubberBand{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: movement 3s linear normal both infinite;
 -o-animation: movement 3s linear normal both infinite;
 animation: movement 3s linear normal both infinite;
}
.move1{
 -webkit-animation: movement1 3s linear normal both infinite;
 -o-animation: movement1 3s linear normal both infinite;
 animation: movement1 3s linear normal both infinite;
}
.move2{
 -webkit-animation: movement2 3s linear normal both infinite;
 -o-animation: movement2 3s linear normal both infinite;
 animation: movement2 3s linear normal both infinite;
}
.move3{
 -webkit-animation: movement3 3s linear normal both infinite;
 -o-animation: movement3 3s linear normal both infinite;
 animation: movement3 3s linear normal both infinite;
}@keyframes movement {
 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-keyframes movement {
 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);  }
}
@keyframes movement1 {
 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-keyframes movement1 {
 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);  }
}
@keyframes movement2 {
 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-keyframes movement2 {
 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);  }
}@keyframes movement3 {
 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-keyframes movement3 {
 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);  }
}
@keyframes light_move {
  0% {transform:rotate(0deg); opacity: 0}
  30%{transform:rotate(40deg); opacity: 1}
  75%{transform:rotate(90deg);}
  100%{transform:rotate(0deg);}
}@-webkit-keyframes light_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);}
}@keyframes light_move1 {
  0% {transform:rotate(0deg);opacity: 0}
  30%{transform:rotate(-40deg);opacity: 1}
  75%{transform:rotate(-90deg);}
  100%{transform:rotate(0deg);}
}@-webkit-keyframes light_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);}
}
  </style>
</body>
</html>


【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/44.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×