试试这个
div
{
position:absolute;
width: 250px;
height: 250px;
background-color: black;
background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png)
}
div:after
{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%);
background-position: -1500px 0;
background-repeat: no-repeat;
-webkit-animation: animation 3s ease-in-out infinite;
}
@-webkit-keyframes animation {
from {background-position: -250px 0;}
to {background-position: 250px 0;}
}
或这个
div
{
position:absolute;
width: 250px;
height: 250px;
background-color: black;
background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png);
overflow:hidden
}
div:after
{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%);
-webkit-animation: animation 3s ease-in-out infinite;
}
@-webkit-keyframes animation {
from {left: -250px;}/**you can use translate3d(-250px,0,0)*/
to {left: 250px;}/** translate3d(250px,0,0)*/
}