Web前端开发资源网纯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 控制位置和动画时间等。
未经允许不得转载：Web前端开发资源网 » 纯CSS实现Logo图片扫光效果
推荐阅读：