利用:before选择器给你的网站Logo添加扫光特效

投稿   雅兮网  2016-01-19 07:18:08  1,093 人阅读  24 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

利用:before选择器给你的网站Logo添加扫光特效

Logo扫光方法

方法很简单,只需要添加一段css代码即可,如果你是WordPress程序,那么请在当前主题css文件最下方添加如下代码,需注意:代码中的#logo:before,根据自己的实际情况修改为当前主题的Logo元素选择器名称。

  1. /**logo扫光效果CSS**/
  2. #logo:before{
  3.     content:"";
  4.     positionabsolute;
  5.     left: -665px;
  6.     top: -460px;
  7.     width200px;
  8.     height15px;
  9.     background-color: rgba(255,255,255,.5);
  10.     -webkit-transform: rotate(-45deg);
  11.     -moz-transform: rotate(-45deg);
  12.     -ms-transform: rotate(-45deg);
  13.     -o-transform: rotate(-45deg);
  14.     transform: rotate(-45deg);
  15.     -webkit-animation: searchLights 1s ease-in 1s infinite;
  16.     -o-animation: searchLights 1s ease-in 1s infinite;
  17.     animation: searchLights 1s ease-in 1s infinite;
  18. }
  19. @-webkit-keyframes searchLights {
  20.     0% { left: -100pxtop: 0; }
  21.     to { left120pxtop100px; }
  22. }
  23. @-o-keyframes searchLights {
  24.     0% { left: -100pxtop: 0; }
  25.     to { left120pxtop100px; }
  26. }
  27. @-moz-keyframes searchLights {
  28.     0% { left: -100pxtop: 0; }
  29.     to { left120pxtop100px; }
  30. }
  31. @keyframes searchLights {
  32.     0% { left: -100pxtop: 0; }
  33.     to { left120pxtop100px; }
  34. }

当然,此效果也适用于其他建站程序,其仅仅是一个CSS效果而已。

:before 选择器介绍

  • :before 选择器在被选元素的内容前面插入内容。
  • 请使用 content 属性来指定要插入的内容。
  • 所有主流浏览器都支持:before选择器。
  • 注意: before在IE8中运行,必须声明 <!DOCTYPE> 。

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,  
原文地址:http://www.iyaxi.com/2016-01-17/844.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. devoted
    devoted 【秀才】 @回复

    怎么查看自己的logo元素选择器是那一个呢?

  2. 三月福利吧
    三月福利吧 【状元】 @回复

    原以为这是图片的效果!

  3. 橘子书
    橘子书 【丞相】 @回复

    厉害,我一直觉得知更鸟的主题是怎么有那个光的,原来如此!有时间试试。

  4. 明月登楼
    明月登楼 【王爷】 @回复

    不错,很酷的感觉!

  5. 捌零男人
    捌零男人 【进士】 @回复

    有效,但不适用,支持一下

  6. 好文章
    好文章 【尚书】 @回复

    瞅瞅

  7. 我要网赚
    我要网赚 【状元】 @回复

    来报道

  8. 小宋日志
    小宋日志 【尚书】 @回复

    给大家一个建议:
    animation: searchLights 1s ease-in 1s infinite;

    这里边的时间改为2,速度慢些,太快了晃眼。

  9. 小宋日志
    小宋日志 【尚书】 @回复

    调了一中午角度问题,终于搞定啦,大家可以看看我的。全屏目前正常啦。
    http://www.xiaosonglog.com

  10. 王商博客
    王商博客 【进士】 @回复

    看了那个效果挺好看的,可惜我用的是emlog

    • 雅兮网
      雅兮网 【尚书】2016-01-19 14:24  回复

      @王商博客这个不管什么建站系统的,只是css技术,在你的css文件里添加就可以了。

  11. 小宋日志
    小宋日志 【尚书】 @回复

    根据自己的实际情况修改为当前主题的Logo元素选择器名称
    这个怎么确定?

  12. Koolight
    Koolight 【尚书】 @回复

    不明觉厉,好厉害的样子。

  13. 小宋日志
    小宋日志 【尚书】 @回复

    好厉害的样子。

  14. 钓鱼小站
    钓鱼小站 【进士】 @回复

    感觉好高大上啊 [鼓掌] 有时间试试

  15. 金亨外汇理财网
    金亨外汇理财网 【举人】 @回复

    加一个回复评论的邮件通知 这个是如何做出来呢?请高手指点 谢谢

  16. 雅兮网
    雅兮网 【尚书】 @回复

    本来先给自己抢个沙发,发现来晚了 [大哭]

  17. 推理社
    推理社 【举人】 @回复

    等会试试

  18. QQ爱好者
    QQ爱好者 【秀才】 @回复

    这个就不懂了 [呲牙]