php图片特效,css3实现图片头像扫光高亮效果

css3出来后，之前很多flash才能做的效果，现在甚至不用写一句js，单纯靠css3新增的属性就能轻松实现!

css3实现图片头像扫光高亮效果,源码：

测试

*{margin:0;padding:0;}

body, td, input, textarea, select, button{color:#5f5f5f;/*font:12px/1.5 "Microsoft YaHei",Tahoma,Arial Geneva, sans-serif;*/}

.demonstrate{padding: 20px;margin: 10px auto;/*border: 1px #bbb solid;*/border-radius: 5px;}

.description h3{color:#f00;padding-bottom:8px;}

.description p{padding-bottom:5px;}

.description strong{color:#080; border-bottom:1px dotted;}

.description b{color:#7A7676;}

.txt{width: 700px;height: 300px; border: 1px solid #f00;}

.demo{width: 100px; height: 100px;display: block;overflow: hidden; -webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;background:url(https://www.phpvar.com/phpvar/wp-content/uploads/file/4.jpg) no-repeat ;border: 5px solid #f00;margin:100px auto ;position: relative;}

.demo:before{content:"";position: absolute;left: -665px; top: -460px;width: 200px;height: 6px;

background-color: rgba(255,255,255,.5);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation: searchLights 3.8s ease-in 3s infinite;

-o-animation: searchLights 3.8s ease-in 3s infinite;

animation: searchLights 3.8s ease-in 3s infinite;

}

@-webkit-keyframes searchLights {

0% { left: -665px; top: -460px; }

to { left: 473px; top: 564px; }

}

@-o-keyframes searchLights {

0% { left: -105px; top: 0; }

to { left: 13px; top: 104px; }

}

@-moz-keyframes searchLights {

0% { left: -105px; top: 0; }

to { left: 13px; top: 104px; }

}

@keyframes searchLights {

0% { left: -105px; top: 0; }

to { left: 13px; top: 104px; }

}

提示：你可以先修改部分代码再运行。

这个扫光的效果，大致实现思路：用css3伪类添加一扫光层，背景白色，透明度看个人喜好设置；现用transform:rotate()旋转45度，剩下的就是控制层的位置啦！

这里要说明的是：不间断的扫光效果，最终是通过css3的animate去实现的，animate属性可以设置动画的延时时间，但却不可以设置每一次重复扫光的间隔时间。变通的处理方法是：将扫光层的left，top 位置值设置离层本身的距离够大，延长每次扫光的时间，从而实现“间隔一定时间重复扫光”的效果。

当然层本身是要加overflow:hidden属性的，这样扫光的效果才会显得更加逼真！！

吐槽下：网上有很多css3的demo，效果很绚丽，但一般都是一大段的代码，没任何注释说明，理解起来比较费时间，这是件很蛋疼的事情。