• 注册
    • 查看作者
    • 站点动态灯笼-修改版

      原文地址: 链接

      功能修改:

      • 文字改为新春快乐

      • 在灯笼下面加了个红包

        • 如下图:
          站点动态灯笼-修改版

      • 为了美观,加上了灯笼发出的灯光会由金色变为金红色再变为金色,增加夜晚观看美感

      • 修正了chrome内核灯笼不摇摆的问题

      展示

      站点动态灯笼-修改版
      直接上源码:

      <html>
          <head>
              <!-- 灯笼样式开始 -->
      <style>
         
          @media only screen and (max-width: 760px) {
              .deng-box, .deng-box1 {
                  display:none;
              }
          }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
              .right {
                  float: left!important;
              }
          }
              .deng-box {
              position: fixed;
              top: 20px;
              left: 10px;
              z-index: 3;
          }
          .deng-box1 {
              position: fixed;
              top: 20px;
              right: 10px;
              z-index: 3;
          }
          .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: -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: 华文行楷;
              font-size: 26px;
              color: #dc8f03;
              font-weight: bold;
              line-height: 44px;
              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% {
                      box-shadow: -5px 5px 50px 4px gold;
                      -webkit-transform: rotate(-10deg)
              }
              50% {
                      box-shadow: -5px 5px 50px 4px  rgba(250, 108, 0, 1);
                      -webkit-transform: rotate(10deg)
              }
              100% {
                      box-shadow: -5px 5px 50px 4px gold;
                      -webkit-transform: rotate(-10deg)
              }
          }
      </style>
       
          </head>
          <body>
              
              <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="shuishui-a"><div class="shui-c"></div><div class="shui-b">
                  </div>
                  </div>     
                     </div>   
                      </div>
                      <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="shuishui-a">
                          <div class="shui-c">
                          </div><div class="shui-b">
                          </div>
                          </div>
                         </div>
                     </div>
                  <!-- 元宵节灯笼样式结束 -->
                  
          </body>
      </html>

      感谢支持!

      山西·朔州
    • 1
    • 1
    • 0
    • 60
    • 何叶

      请登录之后再进行评论

      登录
    • 0
      村长-Dream10神隐会员精神小伙
      打赏了260金币
      • 财富排行榜
      • 等级排行榜
    • 十里清欢
      十里清欢
      一条有理想的咸鱼!
    • 小妖
      小妖
      普普通通的无名之辈
    • 依晨小哥
      依晨小哥
      自由干净
    • Dream-认证官
      Dream-认证官
      他太懒了,什么都没有写
    • LuoJunJunJun
      LuoJunJunJun
      blog.jiangtian1217.cn
    • 乔治的小窝
      乔治的小窝
      他太懒了,什么都没有写
    • 猫狗鼠鱼
      猫狗鼠鱼
      ?博客:catdog007.icu ?b站up主:猫狗鼠鱼?
    • 村长-Dream
      村长-Dream
      一花一草一树木,一人一梦在追求。
    • Dream-活动官
      Dream-活动官
      他太懒了,什么都没有写
    • Yitzu
      Yitzu
      他太懒了,什么都没有写
    • Cat
      Cat
      故梦待续 | 结局无期
    • 十里清欢
      十里清欢
      一条有理想的咸鱼!
    • 村长-Dream
      村长-Dream
      一花一草一树木,一人一梦在追求。
    • RJ
      RJ
      https://qrj.hk
    • 依晨小哥
      依晨小哥
      自由干净
    • Dream-认证官
    • 爱一世
      爱一世
      419598908
    • 小妖
      小妖
      普普通通的无名之辈
    • LuoJunJunJun
      LuoJunJunJun
      blog.jiangtian1217.cn
    • Dream-小编
    • 做任务
    • 实时动态
    • 偏好设置
    • 单栏布局 侧栏位置: