分享一个纯css灯笼,各位大佬转载请注明出处!!!
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000;
}
.lantern-page{
display: flex;
justify-content: space-around;
}
.lantern-box{
position: relative;
width: 120px;
height: 90px;
background-color: #d8000f;
margin: 50px;
border-radius: 50%;
box-shadow: -5px 5px 50px 4px #fa6c00;
transform-origin: 60px -50px;
animation: swing 3s infinite ease-in-out;
}
@keyframes swing {
0%,100% {
transform:rotate(-23deg)
}
50%{
transform: rotate(10deg);
}
}
.lantern-box::before{
content: "";
position: absolute;
top: -7px;
left: 50%;
margin-left: -30px;
width: 60px;
height: 12px;
z-index: 6;
background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
border: 1px solid #dc8f03;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.lantern-box::after{
content: "";
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 12px;
background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
border: 1px solid #dc8f03;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.lantern-top{
width: 2px;
height: 50px;
background: #dc8f03;
position: absolute;
right: 60px;
top: -50px;
}
.lantern-circle{
width: 100px;
height: 90px;
border-radius: 50%;
border: 2px solid #dc8f03;
margin: 12px 8px 8px 10px;
}
.lantern-circle2{
width: 45px;
height: 90px;
line-height: 90px;
text-align: center;
/* transform: rotate(180deg); */
font-size: 30px;
font-weight: 600;
color: #dc8f03;
border-radius: 50%;
border: 2px solid #dc8f03;
margin: -96px 8px 8px 35px;
}
.lantern-tassel{
width: 1px;
height: 20px;
background-color: #dc8f03;
margin: -10px 0 0 60px;
position: relative;
animation: swing 3s infinite ease-in-out;
}
.lantern-tassel-middle,.lantern-tassel-bottom{
position: absolute;
width: 8px;
left: -3px;
}
.lantern-tassel-middle{
height: 8px;
border-radius: 50%;
background-color: #dc8f03;
top: 19px;
}
.lantern-tassel-bottom{
top: 24px;
}
.line{
display: block;
width: 1px;
height: 120px;
background-color: #dc8f03;
position: absolute;
left: 0;
transform-origin: top left;
transform: scale(.2);
}
.line:nth-child(2){
left: 2px;
height: 115px;
}
.line:nth-child(3){
left: 3px;
height: 135px;
}
.line:nth-child(4){
left: 4px;
height: 145px;
}
.line:nth-child(5){
left: 6px;
height: 115px;
}
.line:nth-child(6){
left: 2px;
height: 115px;
}
<div class="lantern-page">
<div class="lantern-item">
<div class="lantern-box">
<div class="lantern-top"></div>
<div class="lantern-circle"></div>
<div class="lantern-circle2">
<span>新</span>
</div>
<div class="lantern-tassel">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
<div class="lantern-item">
<div class="lantern-box">
<div class="lantern-top"></div>
<div class="lantern-circle"></div>
<div class="lantern-circle2">
<span>年</span>
</div>
<div class="lantern-tassel">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
<div class="lantern-item">
<div class="lantern-box">
<div class="lantern-top"></div>
<div class="lantern-circle"></div>
<div class="lantern-circle2">
<span>快</span>
</div>
<div class="lantern-tassel">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
<div class="lantern-item">
<div class="lantern-box">
<div class="lantern-top"></div>
<div class="lantern-circle"></div>
<div class="lantern-circle2">
<span>乐</span>
</div>
<div class="lantern-tassel">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>