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

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

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

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

灯笼特效

第一步、添加HTML代码

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

<!-- 灯笼1 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

<!-- 灯笼2 -->
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

 

HTML代码下载:https://wuyouge.lanzous.com/i8sqzna

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

<?php if (is_home()) { ?>
<!-- 代码放这里 -->
<?php } ?>

第二步、添加CSS样式

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

CSS样式代码下载:   https://wuyouge.lanzous.com/i8squyb

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

懒人版本  Wordpress博客打包版

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

下载打包PHP:https://wuyouge.lanzous.com/i8sqlyh

使用方法如下:

第一步,解压后将deng.php文件上传到当前主题根目录中。

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

<?php require get_template_directory() . '/deng.php'; ?>

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

<?php if (is_home()) { ?>
<!-- 代码放这里 -->
<?php } ?>

 

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

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

本站文章由SEO技术博客撰稿人原创,作者:无 忧创作,如若转载请注明原文及出处:https://www.ainiseo.com/plugins/7203.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(5条)

  • 腾蛙
    腾蛙 2020年2月10日 上午1:17

    会不会影响加载速度

  • 无 忧
    无 忧 2020年1月21日 下午4:33

    为网站添加春节灯笼动态特效(附代码下载)让网站也挂上灯笼为网站添加点喜庆的气氛

联系我

由于平时工作忙:流量合作还是咨询SEO服务,请简明扼表明来意!谢谢!

在线咨询:点击这里给我发消息

邮件:[email protected] 合作微信:wuyoublog

工作时间:周一至周六,9:30-22:30,节假日休息

个人微信
个人微信
分享本页
返回顶部