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

2016-1-17 18:49 来自本站原创 7,541 14 10
[摘要]

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

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

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

Logo扫光方法

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

  1. /**logo扫光效果CSS**/
  2. #logo:before{  /**根据logo外div样式名称修改before前名称**/
  3.     content:"";
  4.     positionabsolute;
  5.     left: -665px/**第一个数字参数控制扫光速度,数字越大越慢**/
  6.     top: -460px;
  7.     width200px;
  8.     height10px/**光标的宽度,可根据实际调整**/
  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 1.5s 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> 。

本文最后更新于2016年10月13日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:14   其中:访客  11   博主  2
    加载中...
    1. 2年前 (2016-02-18) 7楼

      :razz: 我的小站目前使用的是《欲思》主题模板,没有图片logo看来是没法用上这个酷炫功能了;不过真心觉得这个功能很棒,简直是棒极了。

    2. 2年前 (2016-01-25) 6楼

      文章已发布,谢谢投稿!

    3. 2年前 (2016-01-19) 5楼

      :mrgreen: 看起来比较炫

    4. 2年前 (2016-01-19) 4楼

      初来乍到,请多关照

    5. 2年前 (2016-01-19) 板凳

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

      • 飞鸟
        2年前 (2016-01-19)  地下1层

        @小宋日志: 简单的说,看你logo外包着的那个div样式名称是什么,如果是.logo 上面的代码里#logo就要改成.logo,或者是其他名称的样式。
        更直白的理解就是个给你logo外面包着的div css样式加一个:before样式

    6. 2年前 (2016-01-18) 椅子

      利用:before选择器给你的网站Logo添加 光效,非常的漂亮,之前在很多网站都看到过这种光效的

    7. 2年前 (2016-01-17) 沙发

      我logo都没有怎么办,能扫光不? :lol:

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    14 10 7,541
    Top
    天猫618粉丝狂欢节