移动端灯笼

<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>