重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

为网站添加春节灯笼动态特效(附代码下载)

时间: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,在上面添加:

如果只想在首页显示灯笼,可以用下面的判断语句把上面的代码包裹起来:

好了,上面两种方法都可以实现灯宠特效,如果你愿意折腾,可以尝试一下。(小白注意,不懂代码不要乱添加,出现网站错位变形请立即恢复还原,本站不承担后果)

(本代码由知更鸟提供,供学习参考)