html图片闪光效果,css3实现图片滑过发光效果

无标题文档无标题文档

a {

float: left;

position: relative;

}

a:before {

background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(255, 0, 0, 0);

background: -webkit-linear-gradient(left ,rgba(255,255,255,0) 0,rgba(255,255,255,0.1) 10%,rgba(255,255,255,0.1) 50%);

content: "";

height: 516px;/*等于图片的高度*/

left: -300px;

overflow: hidden;

position: absolute;

top: 0;

transform: skewX(-25deg);

-webkit-transform: skewX(-25deg);

width:100px;

}

@-moz-keyframes blinkAnim300 {

0% {left: -300px;}

100% {left:800px;/*比图片的宽度略大*/}

}

@-webkit-keyframes blinkAnim300 {

0% {left:-300px;}

100%{left:800px;}

}

a:hover:before {

animation: 0.4s ease-out 0s normal forwards 1 blinkAnim300;

-webkit-animation: 0.4s ease-out 0s normal forwards 1 blinkAnim300;

}