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

2014-02-22 10:02 16937 次阅读分类: XHTML+CSS, 前端相关 3 条评论

免打扰阅读

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title> <script src="https://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(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; } } </style> </head> <body> <div class="demonstrate"> <div class="description"> <h2></h2> <div class="txt"> <a href="https://mail.qq.com/cgi-bin/feed?u=https://www.phpvar.com/feed" class="demo"></a> </div> </div> </div> </body> </html>

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

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

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

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

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

快速留言：

16938

上一篇： 二维数组转成对象字面量 下一篇： JS的逻辑运算符&& ||和位运算符 & | 的区别

作者: phpvar

快速找到本文的关键字：css3图片扫光效果

作者其它文章:

2016年02月22日 wamp配置虚拟主机vhosts报500 Internal Server Error错误(0)
2013年02月22日 Windows下搭建本地SVN服务器(7)
2013年02月22日本博客返回顶部效果实现源码分享(5)

你可能会喜欢...

3条评论( 网友:2 条,站长:1 条 ) 网友评论{有您的评论更精彩....}

(*必填)

(选填)

[ 请确保填写正确的邮箱地址，您的留言审核通过会收到邮件通知！ ]

粘贴图片链接

CAPTCHAis initialing...

有人回复时邮件通知我

tiandi 2014/02/24 上午 11:53

表示蛋疼的点了运行，木有看到效果，何解。。。chrome

#-24
- phpvar 2014/02/24 下午 12:00
  
  效果必须有啊，延迟3s 开始扫光，我换了个头像图片，之前那个是白底的，可能效果不够明显！
  - tiandi 2014/02/25 下午 1:19
    
    果然是之前那个不明显啊。