渐变略过效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渐变略过</title>
<style>
body{background-color: #D4E1E7;}
*{padding:0; margin:0;}
img {border:none;}
.box{
border: 1px solid #53b4de;
height: 205px;
width: 164px;
overflow: hidden;
position: relative;
margin:50px auto;
}
@keyframes autoplay{0%{margin-left:-60px}
100%{margin-left:200px}}
@-webkit-keyframes autoplay{0%{margin-left:-60px}
100%{margin-left:200px}}
@-ms-keyframes autoplay{0%{margin-left:-60px}
100%{margin-left:200px}}
/* -moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性*/
.box a:before { /*渐变 一定加前缀*/
background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(left center ,rgba(255,255,255,0) 0,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,0.2)),color-stop(100%,rgba(255,255,255,0)));
content: "";
height: 205px;
margin-left: -200px;
margin-top: 0;
overflow: hidden;
position: absolute;
transform: skewX(-25deg);
-webkit-transform:skewX(-25deg);
width: 60px;
z-index: 10;
}
.box:hover a:before{
animation: autoplay 0.3s ease-in 0s;
-webkit-animation:autoplay 0.3s ease-in 0s;
-ms-animation:autoplay 0.3s ease-in 0s;
}
</style>
</head>
<body>
<div class="box">
<a target="_blank" href="http://product.dangdang.com/21005473.html">
<img src="http://img35.ddimg.cn/upload_img/00087/hw/R5_hw150106_1.jpg" >
</a>
</div>
</body>
</html>
