网站挂红灯笼代码介绍

2023快到了,很多wordpress网站上都挂了一个灯笼,看看博客网站挂红灯笼代码,网站上添加灯笼方法,通过这个代码,也可以给自己的网站挂上一个灯笼,喜气洋洋的很喜庆。

代码使用方法很简单,将代码插入到主题任意footer或首页位置即可。

直接添加上去行,想添加到什么位置添加到什么位置。

网站挂红灯笼演示效果

WordPress教程-网站挂红灯笼代码,博客网站上添加灯笼方法教程-痴痴资源网

网站挂红灯笼代码如下
<!--春节灯笼[痴.痴网灯笼]代码-->
<div class="meiha"></div>
<style>
/** 梅花树 **/
.meiha {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 350;/** PNG图宽度 **/
        height: 231;/** PNG图高度 **/
        pointer-events: none;
        background: url('https://cdn.qqsuu.cn/api/img/meihuashu.png');
}
</style>
<!-- 灯笼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>
<style>
.deng-box {
        position: fixed;
        top: -40;
        right: -20;
        z-index: 9999;
        pointer-events: none;
}
 
.deng-box1 {
        position: fixed;
        top: -30;
        right: 10;
        z-index: 9999;
        pointer-events: none;
}
.deng-box1 .deng {
        position: relative;
        width: 120;
        height: 90;
        rgin: 50;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100;
        -webkit-anition: swing 5s infinite ease-in-out;
        box-shadow: -5 5 30 4 rgba(252, 144, 61, 1);
}
.deng {
        position: relative;
        width: 120;
        height: 90;
        rgin: 50;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100;
        -webkit-anition: swing 3s infinite ease-in-out;
        box-shadow: -5 5 50 4 rgba(250, 108, 0, 1);
}
.deng-a {
        width: 100;
        height: 90;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        rgin: 12 8 8 10;
        border-radius: 50% 50%;
        border: 2 solid #dc8f03;
}
.deng-b {
        width: 45;
        height: 90;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        rgin: -2 8 8 26;
        border-radius: 50% 50%;
        border: 2 solid #dc8f03;
}
.xian {
        position: absolute;
        top: -20;
        left: 60;
        width: 2;
        height: 20;
        background: #dc8f03;
}
.shui-a {
        position: relative;
        width: 5;
        height: 20;
        rgin: -5 0 0 59;
        -webkit-anition: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45;
        background: #ffa500;
        border-radius: 0 0 5 5;
}
.shui-b {
        position: absolute;
        top: 14;
        left: -2;
        width: 10;
        height: 10;
        background: #dc8f03;
        border-radius: 50%;
}
.shui-c {
        position: absolute;
        top: 18;
        left: -2;
        width: 10;
        height: 35;
        background: #ffa500;
        border-radius: 0 0 0 5;
}
.deng:before {
        position: absolute;
        top: -7;
        left: 29;
        height: 12;
        width: 60;
        content: " ";
        display: block;
        z-index: 999;
        border-radius: 5 5 0 0;
        border: solid 1 #dc8f03;
        background: #ffa500;
        background: linear-grant(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
        position: absolute;
        bottom: -7;
        left: 10;
        height: 12;
        width: 60;
        content: " ";
        display: block;
        rgin-left: 20;
        border-radius: 0 0 5 5;
        border: solid 1 #dc8f03;
        background: #ffa500;
        background: linear-grant(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
        font-family: 华文行楷,Arial,Lucida Grande,Taho,sans-serif;
        font-size: 3.2rem;
        color: #dc8f03;
        font-weight: bold;
        line-height: 85;
        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)
        }
 
         {
                -moz-transform: rotate(-10deg)
        }
}
@-webkit-keyframes swing {
        0% {
                -webkit-transform: rotate(-10deg)
        }
        50% {
                -webkit-transform: rotate(10deg)
        }
         {
                -webkit-transform: rotate(-10deg)
        }
}
</style>

差不多这个样子,如果大家对这个玩意儿不感兴趣的话,不建议往网站里面弄,基本上多添加一串代码,都会稍微影响网站速度,而且还会把网站弄得花里胡哨的,但是大家如果感兴趣的话,可以自己添加。

常见问题FAQ

部分免费版权图片来自www.freepik.com
本站部分免费版权图片由 Freepik 设计www.freepik.com!!
本站资源和文章版权声明
版权声明:本站部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们,减少损失。联系邮箱:1732765629@qq.com。
购买商品请必看特别声明
所有资源请勿商业运营,违法使用和传播!仅研究学习使用!下载后请在24小时内删除!本站资源大多来自互联网整合,未测试,未标有售后默认无售后,可能会有瑕疵或BUG,介意勿下载!建议注册账号下载。资源付的费为整理辛苦费,资源本身不收费。常见问题解答:点我直达!有问题请反馈:1732765629@qq.com ,感谢支持!
免费下载或者贵宾会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 《免责声明》。
点击下载链接不跳转怎么回事?
您好,QQ内打开是不跳转的,一少部分浏览器也不跳转,一般的UC了,搜狗 360等浏览器都可以跳转。
立即查看