css制作灯笼
CSS制作灯笼的基本方法
使用CSS制作灯笼效果可以通过盒模型、渐变、阴影和动画等属性实现。以下是具体实现步骤：
HTML结构
<div class="lantern">
<div class="lantern-body"></div>
<div class="lantern-tassel"></div>
</div>CSS样式设计
灯笼主体样式：
.lantern {
position: relative;
width: 120px;
height: 180px;
margin: 50px auto;
}
.lantern-body {
width: 100%;
height: 150px;
background: radial-gradient(circle at 40% 40%, #ff0000, #cc0000);
border-radius: 50% 50% 10% 10%;
box-shadow: 0 0 30px rgba(255, 50, 0, 0.8);
}灯笼穗子样式：
.lantern-tassel {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 40px;
background: linear-gradient(to bottom, #ffcc00, #ff6600);
}
.lantern-tassel::before,
.lantern-tassel::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #ffcc00;
border-radius: 50%;
bottom: -10px;
}
.lantern-tassel::before {
left: -25px;
}
.lantern-tassel::after {
right: -25px;
}添加动画效果
让灯笼产生摆动效果：
.lantern {
animation: swing 3s infinite alternate ease-in-out;
transform-origin: top center;
}
@keyframes swing {
0% { transform: rotate(-5deg); }
100% { transform: rotate(5deg); }
}灯笼顶部装饰
添加灯笼顶部结构：
.lantern::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 10px;
background: #cc9900;
border-radius: 5px 5px 0 0;
}进阶灯笼效果
添加灯笼文字
在灯笼主体内添加文字：
<div class="lantern-body">
<span class="lantern-text">福</span>
</div>文字样式：
.lantern-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffcc00;
font-size: 3em;
font-weight: bold;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}发光效果增强
通过多重阴影增强发光效果：
.lantern-body {
box-shadow:
0 0 10px #ff0000,
0 0 20px #ff6600,
0 0 30px #ff9900;
}响应式调整
根据不同屏幕尺寸调整灯笼大小：
@media (max-width: 600px) {
.lantern {
width: 80px;
height: 120px;
}
.lantern-text {
font-size: 2em;
}
}这些CSS技巧组合可以创建出具有传统风格的灯笼效果，通过调整颜色、尺寸和动画参数可以获得不同的视觉效果。
