小 妖 精 努 力 载 入 中. . .

网站添加国庆/新春灯笼代码,给网站增添节日气氛
网站添加国庆/新春灯笼代码,给网站增添节日气氛
2022-10-01 4 评论 89 阅读 正在检测是否收录...
温馨提示:
本文最后更新于2022年10月01日,已超过181天没有更新,若内容或图片失效,请留言反馈。

最近看到很多网站都挂了灯笼,搬过来水篇文章,最初出处也无从考证了,共分享两种方法,各有各的优势,站长朋友可以自行取舍,不过展示效果都差不多。感兴趣的照下文添加吧,效果如图所示。

l8p5rpv1.png

方法一:

第一步、添加HTML代码
将下面的HTML代码添加到主题页脚模板footer.php,标签的上面。

因为代码中有中文,编辑后需要将模板文件保存为UTF-8 无BOM(无签名)的格式,后台主题编辑中修改可以忽略,上面的代码可以只加一个,个人感觉挂两个灯笼更灵动些。

第二步、添加样式

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

如果被其他图层挡住了,请修改5,12,111行 z-index 的值。

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

手机移动端不显示:

方法二:

这个灯笼只是简单应用一下CSS3动画,纯HTML+CSS,具体实现方法,看下面的代码,给网站挂上新春灯笼,顶部左右两边新年快乐代码。同理,改成国庆快乐四个字也是可以了,或者改成只显示两个灯笼。

复制代码放到底部模板文件里面即可

评论 (4)

取消
  1. 头像
    hgg
    iPhone · Safari

    满招损,谦受益。——《尚书·大禹谟》

    iOS 15.6   Safari 回复 删除 垃圾
  2. 头像
    123
    Windows 7 · Google Chrome

    桃李不言,下自成蹊。——《史记》

    Windows 7   Google Chrome 回复 删除 垃圾
  3. 头像
    匿名
    Windows 10 · Google Chrome

    登登

    Windows 10   Google Chrome 回复 删除 垃圾
  4. 头像
    bookpple
    Android · Google Chrome

    好喔

    Android 12   小米浏览器 回复 删除 垃圾