纯代码为WordPress网站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程序。

1. 本站实行充值兑换金币,1元=1金币,每日签到可领取1个金币,[我要充值]
2. 部分资源免费,登录后0元购买免费下载,收费资源价格也很低廉,1至100元不等,VIP会员全站无限下载,[去开通]
3. 本站正式上线, 推荐到QQ或者微信群免费获得VIP会员资格,详情[点我查看]
4. 如果您找不到合适的资源,请联系我们,告知您的需求,我们会在24小时内整理发布。
专注网站维护优化及织梦源码分享 » 纯代码为WordPress网站logo添加闪光动画效果 适用于所有网站

网迅云,安全稳定的云服务器,域名注册,香港空间的提供商!

虚拟主机 云服务器