给你的网站添加春节灯笼代码

MikL- 1.5K 百度已收录 4

春节马上就要到了,分享一下这是2021年新款春节灯笼代码,让你的博客更加有年味儿[aru_12],小编昨天就在群里发了一段api的代码 如下:

<script src="https://api.qqsuu.cn/api/denglong.php"></script>

但是叭 有群员说访问速度并不是很理想,首屏加载时间比较慢[大哭],那么今天我们发一款新的代码[doge],(不要问怎么弄的,问就是偷的)[小纠结]

给你的网站添加春节灯笼代码

使用教程很简单,将代码插入到主题任意footer或首页位置即可[doge]

<!--春节灯笼[灯笼]代码-->
<div class="meiha"></div>
<style>
/** 梅花树 **/
.meiha {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 350px;/** PNG图宽度 **/
        height: 231px;/** 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: -40px;
        right: -20px;
        z-index: 9999;
        pointer-events: none;
}
 
.deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none;
}
.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 10px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03;
}
.deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        margin: -2px 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>

这是带有梅花树的效果,如下图:
给你的网站添加春节灯笼代码

如果不想要梅花树,删除以下代码,只保留春节灯笼。

        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 350px;/** PNG图宽度 **/
        height: 231px;/** PNG图高度 **/
        pointer-events: none;
        background: url('https://cdn.qqsuu.cn/api/img/meihuashu.png');

发表评论 取消回复
表情 代码

  1. Have
    Have Lv 1

    你在发一个下雪的就齐活了

    • shmily
      shmily 首席执行官

      @Have[doge]拒绝花里胡哨

    • aimaor
      aimaor Lv 1

      @Have

      function snow() {
          //    1、定义一片雪花模板
          var flake = document.createElement('div');
          // 雪花字符 ❉❅✼❈❊✥✺❄
          flake.innerHTML = '✼';
          flake.style.cssText = 'position:absolute;color:#fff;';
      
          //获取页面的高度 相当于雪花下落结束时Y轴的位置
          var documentHieght = window.innerHeight;
          //获取页面的宽度,利用这个数来算出,雪花开始时left的值
          var documentWidth = window.innerWidth;
      
          //定义生成一片雪花的毫秒数
          var millisec = 100;
          //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
          setInterval(function() { //页面加载之后,定时器就开始工作
              //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
              var startLeft = Math.random() * documentWidth;
      
              //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
              var endLeft = Math.random() * documentWidth;
      
              //随机生成雪花大小
              var flakeSize = 5 + 20 * Math.random();
      
              //随机生成雪花下落持续时间
              var durationTime = 4000 + 7000 * Math.random();
      
              //随机生成雪花下落 开始 时的透明度
              var startOpacity = 0.7 + 0.3 * Math.random();
      
              //随机生成雪花下落 结束 时的透明度
              var endOpacity = 0.2 + 0.2 * Math.random();
      
              //克隆一个雪花模板
              var cloneFlake = flake.cloneNode(true);
      
              //第一次修改样式,定义克隆出来的雪花的样式
              cloneFlake.style.cssText += `
                              left: ${startLeft}px;
                              opacity: ${startOpacity};
                              font-size:${flakeSize}px;
                              top:-25px;
                                    transition:${durationTime}ms;
                            `;
      
              //拼接到页面中
              document.body.appendChild(cloneFlake);
      
              //设置第二个定时器,一次性定时器,
              //当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
              setTimeout(function() {
                  //第二次修改样式
                  cloneFlake.style.cssText += `
                                      left: ${endLeft}px;
                                      top:${documentHieght}px;
                                      opacity:${endOpacity};
                                  `;
      
                  //4、设置第三个定时器,当雪花落下后,删除雪花。
                  setTimeout(function() {
                      cloneFlake.remove();
                  }, durationTime);
              }, 0);
      
          }, millisec);
      }
      snow();
分享