这个扫光的效果，大致实现思路：用css3伪类添加一扫光层，背景白色，透明度看个人喜好设置；现用transform:rotate()旋转45度，剩下的就是控制层的位置啦！
这 里要说明的是：不间断的扫光效果，最终是通过css3的animate去实现的，animate属性可以设置动画的延时时间，但却不可以设置每一次重复扫 光的间隔时间。变通的处理方法是：将扫光层的left，top 位置值设置离层本身的距离够大，延长每次扫光的时间，从而实现“间隔一定时间重复扫光”的效果。
当然层本身是要加overflow:hidden属性的，这样扫光的效果才会显得更加逼真！！
css3实现图片头像扫光高亮效果,源码：
| 代码如下 | 复制代码 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> *{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(yun_qi_img/gws_rd=ssl) 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; } } </style> </head> <body> <div class="demonstrate"> <div class="description"> <h2></h2> <div class="txt"> <a href="http://mail.qq.com/cgi-bin/feed?u=http://www.phpvar.com/feed" class="demo"></a> </div> </div> </div> </body> </html> |
|
吐槽下：网上有很多css3的demo，效果很绚丽，但一般都是一大段的代码，没任何注释说明，理解起来比较费时间，这是件很蛋疼的事情。
时间： 2025-01-29 23:25:37