css流光效果1：
<!DOCTYPE html>
<html>
<head>
<title>ww</title>
</head>
<style type="text/css">
/*CSS源代码*/
body{
background:#CFCFCF;
}
.image {
position: relative;
overflow:hidden;
width: 300px;
height: 450px;
}
img {
width:300px;
height: 450px;
}
.image:before{
content: '';
position: absolute;
display:block;
width: 200px;
height: 450px;
background:#fff;
top: ;
left: -400px;
translate: -webkit-transform: skewY(25deg);
-moz-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
transform: skewX(-25deg);
background:linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));
-moz-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));
-webkit-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));
-o-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));
}
.image:hover:before{
left:400px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
}
</style>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<div class="image">
<img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" />
<!-- <em></em> -->
</div>
</div> <!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
2：
.view-area ul li{
width: 32.666%;
float: left;
margin-left: %;
position: relative;
overflow: hidden;
}
.view-area ul li img{
width: %;
height: %;
position: relative;
}
.view-area ul li::before{
position: absolute;
top: ;
left: -%;
z-index: ;
display: block;
content: '';
width: %;
height: %;
background: -webkit-linear-gradient(left, rgba(,,,) %, rgba(,,,.) %);
background: linear-gradient(to right, rgba(,,,) %, rgba(,,,.) %);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.view-area ul li:hover::before{
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
% {
left: %;
}
}
@keyframes shine {
% {
left: %;
}
}http://demo.cssmoban.com/cssthemes4/cpts_958_csb/index.html
.