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技巧组合可以创建出具有传统风格的灯笼效果，通过调整颜色、尺寸和动画参数可以获得不同的视觉效果。