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
.
css流光效果
原文地址：https://www.cnblogs.com/jianxian/p/9195435.html