css实现一闪而过的光影效果

来源:互联网 发布:maxwell软件下载 编辑:程序博客网 时间:2024/06/07 10:17
看到一个

css光影一闪而过 css 色泽效果


然后我在项目中希望这个光影效果一直闪烁,所以在原有的基础上进行了改进。

下面粘代码:

@-webkit-keyframes showimg{
0% {
position: absolute;  
   left: -100%;                  
   top: 0;  
   width: 30%;  
   height: 100%;  
   content: ""; 
   background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);  
   transform: skewX(-45deg);
   transition: 1s ease; 
}
100% {
left: 300%;  
        transition: 1s ease; 
}
}

 .item span{
   -webkit-animation:showimg 4s infinite linear ;
}


在此感谢@小沈童鞋 提供的思路

0 0
原创粉丝点击