利用:before选择器 纯代码为网站网站Logo 添加扫光特效动画效果

浏览网页的时候常常看到许多网站上的Logo标志都带有扫光效果,非常漂亮。一直不知道这个效果是如何实现的,今天在翻看网页的时候碰巧在乐朦的网站上看到了这个效果的实现方法,果断将这个效果加在了自己的网站上,添加完成后的效果如本站:

Logo扫光效果思路非常简单,具体如下:

用CSS3伪元素:bfore或:after添加一扫光层;

现用transform:rotate(-45deg)旋转45度;

CSS控制位置和动画时间等。

HTML结构

下面这段代码无需添加到主题文件中,主要是前端HTML调用的一段结构代码,大家稍作了解即可。

 

其中标签<a class的样式调用别出错,效果就能正常实现。此方法适用于大多数网站的LOGO扫光效果。

研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

Logo扫光方法

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


 

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

:before 选择器介绍

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

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

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

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

 

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。

注意:对于部分自适应的主题需要把下面这段代码去掉:

修改完成后大家就可以通过刷新网站首页查看效果了,有些时候可能无法立即查看到修改后的效果,不必担心,这多半是由于网页缓存或使用CDN服务等的关系,你可以通过清楚CRTL+F5浏览器缓存、刷新CDN或者暂时停用下CDN来快速查看到效果。

郑重声明:本站所有下载资源均不包含技术支持和安装服务!需要讨论请进群!
免责申明:本站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
百码云 » 利用:before选择器 纯代码为网站网站Logo 添加扫光特效动画效果

提供最优质的资源集合

立即查看 了解详情