给网站挂上一对喜庆的大红灯笼

55805

节日的时候，比如国庆，中秋，春节，给网站挂上喜庆洋洋的一对或四个(两边各一对)大红灯笼吧！一个灯笼上可以一个汉字也可以两个汉字。

2026032305

 

四个灯笼普通版

简单而直接(放在正文<body></body>之间)——直接在页脚</body>之前加下面的一段代码即可！

<head>
<style>
.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 999;
}
 
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 30px;
    z-index: 999;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    left: 30px;
    z-index: 999;
}.deng-box3 {
    position: fixed;
    top: -30px;
    left: -20px;
    z-index: 999;
}
.deng-box3 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
 
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
 
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
 
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
 
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
 
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
 
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
 
    50% {
        -moz-transform: rotate(10deg)
    }
 
    100% {
        -moz-transform: rotate(-10deg)
    }
}
 
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
 
    50% {
        -webkit-transform: rotate(10deg)
    }
 
    100% {
        -webkit-transform: rotate(-10deg)
    }
}
</style>
<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>
<!-- 灯笼3 -->
<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>
<!-- 灯笼4 -->
<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>
</body>

两个灯笼

注：如果只要两个，只保留<!– 灯笼1 –>和<!– 灯笼2 –>的代码即可。

<!– 灯笼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>

因为代码中有中文，编辑后需要将模板文件保存为 UTF-8 无 BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的灯笼代码可以随意组合，比如，一边两个，两边各两个，两边各一个。

四个灯笼推荐版

这里的灯笼和灯笼上的文字会随着页面大小而自由缩放，上面四个灯笼普通版不会。如果挡在后面的超级链接前面，链接也是可以点击的，同样上面四个灯笼普通件版不能。
20210610080146.jpg

HTML代码

HTML代码如下，可以将下面的HTML代码添加到主题页脚模板 footer.php里。

<!-- 灯笼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>
<!-- 灯笼3 -->
<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>
<!-- 灯笼4 -->
<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样式

将样式代码添加到.CSS文件中，或后台有可以添加的地方都可以。
css代码如下：

.deng-box {
    position: fixed;
    top: -30px;
    right: -30px;
    z-index: 999;
    pointer-events:none; 
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 20px;
    z-index: 999;
    pointer-events:none;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    left: 30px;
    z-index: 999;
    pointer-events:none;
}
.deng-box3 {
    position: fixed;
    top: -30px;
    left: -20px;
    z-index: 999;
    pointer-events:none;
}
.deng-box3 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
 
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
 
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
 
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
 
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng-t {    
    font-size:3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
 
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
 
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
 
    50% {
        -moz-transform: rotate(10deg)
    }
 
    100% {
        -moz-transform: rotate(-10deg)
    }
}
 
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
 
    50% {
        -webkit-transform: rotate(10deg)
    }
 
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

以下代码选其一添加在上面CSS样式后面即可

手机浏览不显示

代码在手机上显示效果不是很好，如果不想在手机或低分辨率设备上显示，可以在上方的CSS代码后面添加：

@media (max-width: 1366px) {
    .deng-box  {
        display: none !important;
    }
    .deng-box1  {
        display: none !important;
    }
    .deng-box2  {
        display: none !important;
    }
    .deng-box3  {
        display: none !important;
    }
}

注：@media (max-width: 1366px)即为分辨率width值<=1366px的设备不显示，这里的1366px可以根据你的需要来修改。
比如：
@media (min-width: 768px){ //>=768的设备 }
@media (max-width: 1199){ //<=1199的设备 }

手机浏览缩小显示

手机或较低分辨率设备访问的时候，灯笼和灯笼上的文字会随着当前访问设备屏幕的大小而自由缩放,并且不会遮盖后面的链接。

@media screen and (max-width: 730px) {
.deng-box {
right: 55px;
zoom:0.45
}
.deng-box1 {
right: 190px;
zoom:0.45
}
.deng-box2 {
left: 190px;
zoom:0.45
}
.deng-box3 {
left: 55px;
zoom:0.45
}
}
© 版权声明
予人以享，不负所创；转载留链，致敬原创
底线，心之尺，言之界
网站建设
心有所喜，可点赞、可分享、可收藏
点赞5赞赏 分享
Jaden的头像-尘遇钻石会员
谷歌相机安装教程-尘遇
谷歌相机安装教程
谷歌相机安装教程
3年前 1.1W+
甲骨文云 注册99%成功方法-尘遇
甲骨文云 注册99%成功方法
甲骨文云 注册99%成功方法
5年前 9654
甲骨文升级付费账号转换区及收费情况-尘遇
甲骨文升级付费账号转换区及收费情况
甲骨文升级付费账号转换区及收费情况
4年前 9632
甲骨文被封的提示和症状-尘遇
甲骨文被封的提示和症状
甲骨文被封的提示和症状
4年前 9525
Joe主题的归档和微语(动态)-尘遇
Joe主题的归档和微语(动态)
Joe主题的归档和微语(动态)
5年前 9500
Windows相关密钥(Win10-11)长期更新-尘遇
Windows相关密钥(Win10-11)长期更新
Windows相关密钥(Win10-11)长期更新
5年前 8789
相关推荐
Joe主题的归档和微语(动态)-尘遇
Joe主题的归档和微语(动态)
Joe主题的归档和微语(动态)
5年前 9500
好久不见之网站底部样式-尘遇
好久不见之网站底部样式
好久不见之网站底部样式
5年前 8689
很漂亮的一天只弹窗一次的公告-尘遇
很漂亮的一天只弹窗一次的公告
很漂亮的一天只弹窗一次的公告
4年前 8015
网站访问量暨与小伙伴们的N次相遇-尘遇
网站访问量暨与小伙伴们的N次相遇
网站访问量暨与小伙伴们的N次相遇
5年前 7154
ArticlePoster海报四版齐发任君选-尘遇
ArticlePoster海报四版齐发任君选
ArticlePoster海报四版齐发任君选
5年前 6579
本站同款右键菜单及F12美化-尘遇
本站同款右键菜单及F12美化
本站同款右键菜单及F12美化
5年前 6033
寄言于此 共5条
头像
愿您每一次发声，皆为生活添色，予人共鸣、沉思与欢喜
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
快捷回复
天涯流落思无穷。既相逢，却匆匆。
顺风不浪，逆风向上！
远赴人间惊鸿宴，一睹人间盛世颜。
既以容颜惊天下，何必开口乱芳华！
欲买桂花同载酒，终不似，少年游！
青山不墨千秋画，绿水无弦万古琴。
谁言天公不好客，漫天风雪送一人！
    只看作者
无情岁月增中减有味诗书苦后甜

1谷歌相机安装教程

2甲骨文云 注册99%成功方法

3甲骨文升级付费账号转换区及收费情况

4甲骨文被封的提示和症状

5Joe主题的归档和微语(动态)

6Windows相关密钥(Win10-11)长期更新

7好久不见之网站底部样式

8很漂亮的一天只弹窗一次的公告

9Oracle Cloud甲骨文VPS防火墙设置

10甲骨文oracle开启两步验证图文教程

11网站访问量暨与小伙伴们的N次相遇

12ArticlePoster海报四版齐发任君选