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

作者 : admin 本文共7865个字,预计阅读时间需要20分钟 发布时间: 2020-05-8 共156人阅读

2020春节将至,做为站长管理员,让网站也挂上灯笼为网站添加点喜庆的气氛。

为大家分享个福利,为你的网站添加春节灯笼动态特效代码,效果见本站右上角。

放弃Flash动画吧,这是CSS3动画灯笼,这个灯笼只是简单应用一下CSS3动画,纯HTML+CSS手敲出来的,由于时间短写的不是很严谨,但不影响使用,具体实现方法,文章最后有打包文件下载。效果如图。

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

第一步、添加HTML代码

将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的上面。

因为代码中有中文,编辑后需要将模板文件保存为UTF-8 无BOM(无签名)的格式,后台主题编辑中修改可以忽略,上面的代码可以只加一个,个人感觉挂两个灯笼更灵动些。如果只想在首页显示灯笼,可以用下面的判断语句把HTML代码包裹起来。

第二步、添加CSS样式

将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中,点击“发布”即可!

也可以将样式代码直接加到主题样式文件style.css的最后。可能灯笼上的文字字号在有些主题上有点大,可以适当修改第133行的字号:font-size: 3.2rem;

懒人版本  Wordpress博客打包版

如果你是wordpress博客程序,可以使用PHP文件形式,简单方便,尽情折腾吧。

使用方法如下:

第一步,新建并编辑deng.php文件上传到当前主题根目录中。

第二步,打开当前主题页脚模板footer.php,在<?php wp_footer(); ?>上面添加:

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

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

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!4105897@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

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

常见问题FAQ

免费下载或者贵宾会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 《免责声明》。
点击下载链接不跳转怎么回事?
您好,QQ内打开是不跳转的,一少部分浏览器也不跳转,一般的UC了,搜狗 360等浏览器都可以跳转。
可以直接把资源发给我吗?
您好,付费资源可以直接把链接发送给您,免费资源不提供任何帮助,软件资源自测,或者请站长喝红牛!

发表评论