css流光效果

css流光效果1：

<!DOCTYPE html>
<html>
<head>
    <title>ww</title>
</head>
<style type="text/css">
    /*CSS源代码*/
    body{
        background:#CFCFCF;
    }
    .image {
      position: relative;
      overflow:hidden;
       300px;
      height: 450px;
    }
    img {
      300px;
      height: 450px;
    }
    .image:before{
        content: '';
        position: absolute;
        display:block;
         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{
     32.666%;
    float: left;
    margin-left: 1%;
    position: relative;
    overflow: hidden;
}
.view-area ul li img{
     100%;
    height: 100%;
    position: relative;
}
.view-area ul li::before{
    position: absolute;
    top: 0;
    left: -135%;
    z-index: 2;
    display: block;
    content: '';
     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

相关阅读:
[原]80386中断表
 [原]elf可执行连接文件格式
 [原]nasm语法
 VLAN基础配置及Access接口
 配置hybird接口
 配置Trunk接口
 [导入]Oracle常用技巧和脚本
 [导入]ORACLE 常用的SQL语法和数据对象
 [导入]Oracle 基本知识
 [导入]Oracle特殊包
原文地址：https://www.cnblogs.com/fightjianxian/p/9195435.html