1. SEO技术博客首页
  2. 建站教程
  3. 精品插件

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

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代码

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

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

第二步、添加CSS样式

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

CSS样式代码下载

CSS样式

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

懒人版本  Wordpress博客打包版

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

下载打包PHP

使用方法如下:

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

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

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

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

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

 

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

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

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

发表评论

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

评论列表(3条)

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

    会不会影响加载速度

    • 无 忧
      无 忧 回复 腾蛙 2020年2月10日 下午4:29

      不会,你看我博客速度慢吗

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

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

联系我们

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

邮件:3002015859@qq.com

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

QR code

公告:本站正在遭受大流量CC攻击,访问缓慢请耐心等待!本站打不死,越打SEO排名越好(强烈谴责黑帽SEO和靠非法手段劫持网站的行业"蛀虫")