现在css3渐渐的被项目开发中考虑进来了，各大网站在新做的项目中都纷纷应用了css3的一些差异体验。我前几天逛易迅看到个鼠标滑过的一个过渡效果，虽然这个在很早百度音乐听站上面就已经有了，但是这个我感觉更简洁。
源码：
里面的渐变可以感觉自己的实际情况去做些调整，渐变体的宽度高度位置都是可以自己去慢慢调整的
代码如下
复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<a><img src="/WEB/File/U3325P704T93D1661F3923DT20090612155225.jpg" /></a>
</body>
