看到一个
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% {
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 ;
}
在此感谢@小沈童鞋 提供的思路