在知更鸟大神的网站看到他的主题有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。
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年5月6日 20:18 0楼
这个好屌啊
2016年1月26日 12:08 0楼
扫光 偏移了 我怎么看到
2016年1月26日 11:35 0楼
喜欢上了你的主题怎么办。。。
2016年1月20日 22:09 0楼
不错啊,没想到这么快就用上了,看效果还不错