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

小宋
322
文章
782
评论
2016年1月19日13:45:32 4 16 次 1174字阅读3分54秒

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

BaiduShurufa_2016-1-19_13-44-59

Logo扫光方法

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

/**logo扫光效果CSS**/ 
#logo:before{ 
 content:""; 
 position: absolute; 
 left: 71px;/**此处为白色光标起始位置,可以和最下边的71相对应**/ 
 top: 50px; 
 width: 80px; 
 height: 11px;/**光标的宽度,可根据实际调整**/ 
 background-color: rgba(255,255,255,.5); 
 -webkit-transform: rotate(-70deg);/**5个70是调整光标角度的**/ 
 -moz-transform: rotate(-70deg); 
 -ms-transform: rotate(-70deg); 
 -o-transform: rotate(-70deg); 
 transform: rotate(-70deg); 
 -webkit-animation: searchLights 1s ease-in 1s infinite; 
 -o-animation: searchLights 1s ease-in 1s infinite; 
 animation: searchLights 2s ease-in 1s infinite;/**建议第一个参数为2,这样速度慢些,不晃眼**/ 
} 
/**着重调下以下参数**/ 
@-webkit-keyframes searchLights { 
 0% { left: 71px; top: 40; } 
 to { left: 350px; top: 50px; } 
} 
@-o-keyframes searchLights { 
 0% { left: 71px; top: 40; } 
 to { left: 350px; top: 50px; } 
} 
@-moz-keyframes searchLights { 
 0% { left: 71px; top: 40; } 
 to { left: 350px; top: 50px; } 
} 
@keyframes searchLights { 
 0% { left: 71px; top: 40; } 
 to { left: 350px; top: 50px; } 
}

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

:before 选择器介绍

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

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

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

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

转转:雅兮网

继续阅读
  • 本文由 发表于 2016年1月19日13:45:32
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:4   其中:访客  0   博主  0
    • avatar 孟子非博客 3

      这个好屌啊

      • avatar 虎子 3

        扫光 偏移了 我怎么看到

        • avatar 虎子 3

          喜欢上了你的主题怎么办。。。

          • avatar boke112导航 5

            不错啊,没想到这么快就用上了,看效果还不错