纯CSS如何实现图片扫光效果

摘要：         前两天逛逛别人的网站，发现网站的图片都有扫光特效。觉得很醒目很漂亮。于是心就痒痒了。...

        前两天逛逛别人的网站，发现网站的图片都有扫光特效。觉得很醒目很漂亮。于是心就痒痒了。然后，嘿嘿，就拿过来了。

        纯CSS实现图片扫光效果，效果如下：

html代码如下：

<div class="ilogo">    <h1 class="ititle">        <a href="">            <img src="timg.jpg">        </a>    </h1></div>

CSS代码：

<style>    .ilogo {        position: relative;        float: left;        margin: 18px 0 0 5px;        overflow: hidden;        transition-duration: 5s;/**动画时间**/    }    .ilogo:before {        content: "";        position: absolute;        width: 1000px;        height: 20px; /**光标的宽度，可根据实际调整**/        background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);        -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        transform: rotate(-45deg);        -webkit-animation: searchLights 1s ease-in 1s infinite;        -o-animation: searchLights 1s ease-in 1s infinite;        animation: searchLights 1s ease-in 1s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/    }    @keyframes searchLights {        0% {            left: -200px;            top: -300px;        }        100% {            left: -160px;            top: 800px;        }    }</style>

图片扫光效果实现说明：

1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层；

2、用 transform:rotate(-45deg) 旋转 45 度；

3、@ keyframes 规则来控制扫光效果的起始位置和结束位置；

4、用 CSS 控制位置和动画时间等。