新年快乐

嗯 2021年的春节也要到了,就是好快,过两天就新年了,是时候挂一个小灯笼了。

一些代码

<!-- 灯笼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>
@media(max - width:850px){.deng - box,.deng - box1{display:none}
}.deng - box{left:60px}
.deng - box,.deng - box1{position:fixed;top:35px;z - index:1999}
.deng - box1{left:20px}
.deng - box1.deng{- webkit - animation:swing 5s ease - in-out infinite;animation:swing 5s ease - in-out infinite;box - shadow:-5px 5px 30px 4px#fc903d}
.deng,.deng - box1.deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border - radius:50 % 50 %;- webkit - transform - origin:50 % -100px}
.deng{- webkit - animation:swing 3s ease - in-out infinite;animation:swing 3s ease - in-out infinite;box - shadow:-5px 5px 50px 4px#fa6c00}
.deng - a{width:100px;margin:12px 8px 8px 10px}
.deng - a,.deng - b{height:90px;background:#d8000f;background:rgba(216,0,15,.1);border - radius:50 % 50 %;border:2px solid#dc8f03}
.deng - b{width:45px;margin:-4px 8px 8px 26px}
.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 ease - in-out infinite;- webkit - transform - origin:50 % -45px;background:orange;border - radius:0 0 5px 5px}
.shui - b{top:14px;height:10px;background:#dc8f03;border - radius:50 %}
.shui - b,.shui - c{position:absolute;left:-2px;width:10px}
.shui - c{top:18px;height:35px;background:orange;border - radius:0 0 0 5px}
.deng:before{top:-7px;left:29px;z - index:1999;border - radius:5px 5px 0 0;border:1px solid#dc8f03}
.deng:after,.deng:before{position:absolute;height:12px;width:60px;content:" ";display:block;background:orange;background:linear - gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}
.deng:after{bottom:-7px;left:10px;margin - left:20px;border - radius:0 0 5px 5px;border:1px solid#dc8f03}
.deng - t{margin:3px 8px 8px - 5px;font - size:3.2rem;color:#dc8f03;font - weight:700;line - height:85px;text - align:center}
.night.deng - box,.night.deng - box1,.night.deng - t{background:transparent ! important}
@keyframes swing{0 %{transform:rotate( - 10deg)}
50 %{transform:rotate(10deg)}
to{transform:rotate( - 10deg)}
}@ - moz - keyframes swing{0 %{- moz - transform:rotate( - 10deg)}
50 %{- moz - transform:rotate(10deg)}
to{- moz - transform:rotate( - 10deg)}
}@ - webkit - keyframes swing{0 %{- webkit - transform:rotate( - 10deg)}
50 %{- webkit - transform:rotate(10deg)}
to{- webkit - transform:rotate( - 10deg)}
}

效果图

微信图片_20210210220046.png