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

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月29日21:09:43
评论
867看 1053字

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

Logo扫光方法

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

/**logo扫光效果CSS**/

#logo:before{
content:“”;
position: absolute;
left: –665px;
top: –460px;
width: 200px;
height: 15px;
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 1s 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效果而已。

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

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