为网站添加春节灯笼动态特效(附代码下载)
时间:2020-08-07 10:20:11
作者:重庆seo小潘
来源:
2020春节将至,做为站长管理员,让网站也挂上灯笼为网站添加点喜庆的气氛。 为大家分享个福利,为你的网站添加春节灯笼动态特效代码,效果见本站右上角。 放弃Flash动画吧,这是CSS3动画灯笼,这个灯笼只是简单应用一下CSS3动画,纯HTML+CSS手敲出来的,由于
2020春节将至,做为站长管理员,让网站也挂上灯笼为网站添加点喜庆的气氛。
为大家分享个福利,为你的网站添加春节灯笼动态特效代码,效果见本站右上角。
放弃Flash动画吧,这是CSS3动画灯笼,这个灯笼只是简单应用一下CSS3动画,纯HTML+CSS手敲出来的,由于时间短写的不是很严谨,但不影响使用,具体实现方法,文章最后有打包文件下载。效果如图。
将下面的HTML代码添加到主题页脚模板footer.php,标签的上面。
因为代码中有中文,编辑后需要将模板文件保存为UTF-8 无BOM(无签名)的格式,后台主题编辑中修改可以忽略,上面的代码可以只加一个,个人感觉挂两个灯笼更灵动些。如果只想在首页显示灯笼,可以用下面的判断语句把HTML代码包裹起来。
将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中,点击“发布”即可。
CSS样式代码下载
也可以将样式代码直接加到主题样式文件style.css的最后。可能灯笼上的文字字号在有些主题上有点大,可以适当修改第133行的字号:font-size: 3.2rem;
如果你是wordpress博客程序,可以使用打包后的PHP文件,简单方便,尽情折腾吧。
使用方法如下:
第一步,解压后将deng.php文件上传到当前主题根目录中。
第二步,打开当前主题页脚模板footer.php,在上面添加:
如果只想在首页显示灯笼,可以用下面的判断语句把上面的代码包裹起来:
好了,上面两种方法都可以实现灯宠特效,如果你愿意折腾,可以尝试一下。(小白注意,不懂代码不要乱添加,出现网站错位变形请立即恢复还原,本站不承担后果)
(本代码由知更鸟提供,供学习参考)