软件资源 元旦到了，来给你的网站加个灯笼吧~

[Clover_233]

↑效果

代码如下：

    <script>
        (function () {
    'use strict';
 
    function styleInject(css) {
      if (!css || typeof document === 'undefined') return;
      const style = document.createElement('style');
      style.type = 'text/css';
      document.head.appendChild(style);
      style.appendChild(document.createTextNode(css));
    }
 
    const css = `@charset "UTF-8";.lantern__warpper{position:fixed;top:12px;left:40px;pointer-events:none;user-select:none;z-index:999}.lantern__warpper.lantern__secondary{left:calc(100% - 130px)}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50%;animation:lantern-swing 3s ease-in-out infinite alternate-reverse;transform-origin:50% -70px;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;transform:translate(-50%,-100%);background:#dc8f03}.lantern__circle{width:80%;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:100%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;font-size:24.3px;color:#dc8f03;font-weight:700;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tail .lantern__rect{position:absolute;top:0;left:50%;transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@keyframes lantern-swing{0%{transform:rotate(-8deg)}to{transform:rotate(8deg)}}@media (max-width:460px){.lantern__warpper{top:8px;left:30px}.lantern__warpper.lantern__secondary{left:calc(100% - 80px)}.lantern__box{width:50px;height:40px;transform-origin:50% -40px;box-shadow:-5px 5px 50px -1px #fa6c00}.lantern__box:after,.lantern__box:before{height:4px;width:25px}.lantern__line{width:2px;height:8px}.lantern__circle .lantern__text{font-size:13.5px;line-height:38px}.lantern__tail{width:4px;height:8px}.lantern__tail .lantern__junction{transform:translate(-50%,5.6px)}.lantern__tail .lantern__rect{transform:translate(-50%,7.2px);width:8px;height:16px}}`;
    styleInject(css);
 
    const content = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">元</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">旦</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>';
 
    const div = document.createElement('div');
    div.className = 'j-china-lantern';
    div.innerHTML = content;
    document.body.appendChild(div);
  })();
 
    </script>