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: 0;
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(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.image:hover:before{
left:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.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: 1%;
position: relative;
overflow: hidden;
}
.view-area ul li img{
width: 100%;
height: 100%;
position: relative;
}
.view-area ul li::before{
position: absolute;
top: 0;
left: -135%;
z-index: 2;
display: block;
content: ‘‘;
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.view-area ul li:hover::before{
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
http://demo.cssmoban.com/cssthemes4/cpts_958_csb/index.html
.
原文地址：https://www.cnblogs.com/jianxian/p/9195435.html
时间： 2024-08-03 21:44:34