技术教程:纯代码为网站logo添加闪光动画效果

搜刮好东西分享简介:为网站log增加闪光动画效果已经不算是新鲜东西了。不过现在还是有很多网站使用此效果,让logo显得比较有美观。今天分享一篇如何用纯代码的方式为网站logo添加闪光动画效果,适用于所有网站。

我们浏览网站时经常会看到一些网站的LOGO带有扫光效果,像光线扫过一样,看上去比较美观。有的站长可能用软件做一个GIF格式的logo,可以达到类似的效果,但是今天发现可以用纯代码实现网站logo扫光的效果,还是很不错的。

LOGO闪光动画代码:

这段代码是CSS格式代码,一般情况下是添加到网站的主样式表中,对于大多数使用wordpress建站的朋友来说可以放到主题的style.css文件中,也有部分主题可能有单独的css文件,比如本站现在用的DUX主题其主样式文件为main.css,所以大家可以根据自己主题或者模版的情况选择放到相应的CSS文件即可。

/**logo闪光效果CSS**/.logo{ position: relative; overflow: hidden; float:left; max-height: 50px;}.logo:before { content: \"\"; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: blink 1s ease-in 1s infinite; animation: blink 1s ease-in 1s infinite;} @-webkit-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@-o-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@-moz-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@keyframes blink { from {left: -100px;top: 0;} to {left: 320px;top: 0;}}

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

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

.logo{ position: relative; overflow: hidden; float:left; max-height: 50px; }

使用wordpress的站长可以把代码中的.logo修改成自己主题使用的logo元素选择器名称,比如有的是.site-logo。原则上说这个代码应该可以适用于所有网站,并不仅限于wordpress程序。

wordpress教程

WordPress教程:为文章添加复制文章内容自动添加版权和原文链接信息的两种方法

2020-10-30 7:52:49

wordpress教程

WordPress主题:Ripro6.3子主题 全站美化包 美化后台功能二开版

2020-10-30 7:52:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  客服QQ:169403068