为网站添加春节灯笼动态特效

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

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

第一步添加HTML代码：

将下面的HTML代码添加到主题页脚模板footer.php，</body>标签的上面。这里只展示2个灯笼代码，需要4个灯笼直接下载源文件即可。

<!-- 灯笼 1 -->
<div class="xnkl">
<div class="deng-box2">
  <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-box3">
  <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>

第二步添加CSS：

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

CSS代码太长，我就不放在这里啦，直接打包成压缩包，下载即可，包含html文件+css文件。

源码下载地址：

资源文件下载

来源：蓝奏网盘

立即下载

懒人版本 WordPress博客打包版：

使用方法如下：

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

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

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

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

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

源码下载地址：

资源文件下载

来源：蓝奏网盘

立即下载