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

2016-1-17 18:49 来自本站原创 15,793 16 10

[摘要]

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

Logo扫光方法

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

/**logo扫光效果CSS**/
#logo:before{ /**根据logo外div样式名称修改before前名称**/
content:"";
position: absolute;
left: -665px; /**第一个数字参数控制扫光速度，数字越大越慢**/
top: -460px;
width: 200px;
height: 10px; /**光标的宽度，可根据实际调整**/
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 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度，数字越大越慢**/
}
@-webkit-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}

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

:before 选择器介绍

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

所有主流浏览器都支持:before选择器。

注意: before在IE8中运行，必须声明 <!DOCTYPE> 。

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

声明：凡注明“本站原创”的所有文字图片等资料，版权均属雅兮网所有，欢迎转载，但务请注明出处；

标签：Logo扫光 wordpress 网站美化

目前评论：16 其中：访客 0 博主 0

加载中...

流浪 1

5年前 (2019-08-19) 0楼

回复

为什么我的logo一起带动的? 我蒙蔽了
- 飞鸟站长
  
  5年前 (2019-08-20) 地下1层
  
  回复
  
  @流浪：一起带动是什么意思呢？
我爱动感单车网 4

8年前 (2016-02-18) 0楼

回复

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

8年前 (2016-01-25) 0楼

回复

文章已发布，谢谢投稿！
好文章 3

8年前 (2016-01-19) 0楼

回复

看起来比较炫
我要网赚 1

8年前 (2016-01-19) 0楼

回复

初来乍到，请多关照
小宋日志 1

8年前 (2016-01-19) 0楼

回复

根据自己的实际情况修改为当前主题的Logo元素选择器名称
这个怎么确定？
- 闫广冉 站长
  
  8年前 (2016-01-19) 地下1层
  
  回复
  
  @小宋日志：简单的说，看你logo外包着的那个div样式名称是什么，如果是.logo 上面的代码里#logo就要改成.logo，或者是其他名称的样式。
  更直白的理解就是个给你logo外面包着的div css样式加一个:before样式
  - 小宋日志 1
    
    8年前 (2016-01-19) 地下2层
    
    回复
    
    @闫广冉：多谢，我的已经用上了。
    - 我爱动感单车网 4
      
      8年前 (2016-02-18) 地下3层
      
      回复
      
      @小宋日志：特意去看了看，效果真心不错，令我很是羡慕哦：因为我的实现不了这个扫光效果！
香港vps 1

8年前 (2016-01-18) 0楼

回复

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

8年前 (2016-01-17) 0楼

回复

我logo都没有怎么办，能扫光不？
- 闫广冉 站长
  
  8年前 (2016-01-17) 地下1层
  
  回复
  
  @江西养牛人：可以的，你把这段css加入到你的style.css里看看效果
  - 江西养牛人 3
    
    8年前 (2016-01-17) 地下2层
    
    回复
    
    @闫广冉：回头试试，你这扫光高大上呀。
    - 我爱动感单车网 4
      
      8年前 (2016-02-18) 地下3层
      
      回复
      
      @江西养牛人：我的也没有logo图片，听从博主的建议试了试，很可惜没效果，呜呜呜呜……多少是个遗憾啊！