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

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 } ?>

源码下载地址:

来源:蓝奏网盘
|| 版权声明
作者:云言
链接:https://yyink.cn/archives/102.html
声明:如无特别声明本文即为原创文章仅代表个人观点,版权归《云言博客》所有,欢迎转载,转载请保留原文链接。
THE END
分享
二维码
海报
为网站添加春节灯笼动态特效
2022春节将至,做为站长管理员,让网站也挂上灯笼为网站添加点喜庆的气氛。 这是CSS3动画灯笼,这个灯笼只是简单应用一下CSS3动画,纯HTML+CSS手敲出来的,由……
< <上一篇
下一篇>>