• 查看作者
    • 移动端灯笼

      <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>
      <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>
      <style>
      .deng-box1 {position: fixed;top: 50px;left:-25px;z-index: 9999;}
      .deng-box {position: fixed;top: 50px;right: -25px;z-index: 9999;}
      .deng-box1 .deng {position: relative;width: 50px;height: 37px;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: 50px;height: 37px;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 {height: 35px;background: rgba(216, 0, 15, 0.1);margin: -2px;border-radius: 50% 50%;border: 2px solid #dc8f03;}
      .deng-b {width: 20px;background: rgba(216, 0, 15, 0.1);margin: -2px 8px 8px 13.5px;border-radius: 50% 50%;border: 2px solid #dc8f03;}
      .xian {position: absolute;top: -80px;left: 25px;width: 2px;height: 80px;background: #dc8f03;}
      .shui-a {width: 5px;height: 15px;margin: 2px 0 0 25px;-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: 18px;left: -2px;width: 10px;height: 0px;background: #dc8f03;border-radius: 50%;}
      .shui-c {position: absolute;top: 14px;left: -2px;width: 8px;height: 20px;background: #ffa500;border-radius: 0 0 0 5px;}
      .deng::after {position: absolute;bottom: -5px;left: -10px;height: 5px;width: 30px;content: " ";margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}
      .deng::before {position: absolute;top: -5px;left: 10px;height: 5px;width: 30px;content: " ";z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}
      .deng-t {font-size: 1.1rem;color: #dc8f03;font-weight: bold;line-height: 32px;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)}}
      .jinsom-verify {z-index: 9998;}
      </style>

    • 0
    • 0
    • 0
    • 9
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容