摘要：
前两天逛逛别人的网站，发现网站的图片都有扫光特效。觉得很醒目很漂亮。于是心就痒痒了。... 前两天逛逛别人的网站，发现网站的图片都有扫光特效。觉得很醒目很漂亮。于是心就痒痒了。然后，嘿嘿，就拿过来了。
纯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 控制位置和动画时间等。
此篇短文由DurkBlue发布，写作不易转载请注明来处
