CSS 的 animation屬性可以鬆地達到掃光(流光)效果。
<PREVIEW>
<HTML>
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a>
<CSS>
.button {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
.button .flash {
overflow: hidden;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.button .flash:after {
content: '';
position: absolute;
height: 400%;
width: 30%;
top: -180%;
left: 0;
opacity: 0.6;
background-image: url(light01.png);
background-size: 100%;
background-position: center;
animation-name: flashLight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.button img {
width: 100%;
z-index: 1;
}
@-webkit-keyframes flashLight {
from {
left: -50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
to {
left: 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0.6;
}
}
@keyframes flashLight {
from {
left: -50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
to {
left: 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0.6;
}
}
<download>
CLICK HERE