2 个回答
满意答案

基础灯笼结构
在HTML尾部添加灯笼容器,通过CSS实现悬挂和摆动效果
自定义扩展
修改灯笼数量:复制deng-box容器并调整定位
更改文字:替换deng-t中的文本(如“福”“吉”等
WordPress 等CMS集成
后台插件方式
部分CMS支持通过节日插件直接启用灯笼特效,可设置展示时间和样式
手动修改模板
将灯笼代码插入主题的footer.php或公共CSS文件中
在HTML尾部添加灯笼容器,通过CSS实现悬挂和摆动效果
<!-- 灯笼容器 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div> <!-- 悬挂线 -->
<div class="deng-a"><div class="deng-t">春</div></div>
</div>
</div>
.deng-box {
position: fixed;
top: -30px;
right: 10px;
z-index: 9999;
pointer-events: none;
}
.deng {
width: 120px;
height: 90px;
background: #d8000f;
border-radius: 50%;
animation: swing 3s infinite ease-in-out;
}
@keyframes swing {
0%,100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
自定义扩展
修改灯笼数量:复制deng-box容器并调整定位
更改文字:替换deng-t中的文本(如“福”“吉”等
WordPress 等CMS集成
后台插件方式
部分CMS支持通过节日插件直接启用灯笼特效,可设置展示时间和样式
手动修改模板
将灯笼代码插入主题的footer.php或公共CSS文件中
发布于:3周前 (07-16) IP属地:湖北省

不错哦。。。。。。
发布于:5年前 (2021-02-02) IP属地:江苏省