css制作灯笼

使用CSS制作灯笼效果

通过CSS的伪元素、渐变和阴影效果可以模拟传统灯笼的立体感和光影效果。以下是一种实现方法：

HTML结构

<div class="lantern">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

CSS样式

.lantern {
  position: relative;
  width: 120px;
  height: 180px;
  margin: 50px auto;
}

.top, .bottom {
  width: 100%;
  height: 20px;
  background: #d63031;
  border-radius: 10px;
  box-shadow: 0 0 10px #ff7675;
}

.middle {
  width: 100%;
  height: 140px;
  background: radial-gradient(circle at center, #ff7675, #d63031 70%);
  border-radius: 50% 50% 10% 10%;
  box-shadow: 
    0 0 30px #ff7675,
    inset 0 0 20px #ffeaa7;
}

.bottom {
  position: absolute;
  bottom: 0;
}

/* 灯笼穗效果 */
.lantern::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #d63031, #fdcb6e);
}

添加动画效果

让灯笼产生摇摆动画：

.lantern {
  animation: swing 3s infinite alternate ease-in-out;
  transform-origin: top center;
}

@keyframes swing {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

增强立体感

通过多层阴影创造立体效果：

.middle {
  box-shadow: 
    0 0 15px #ff7675,
    inset 0 0 30px #ffeaa7,
    0 10px 20px rgba(0,0,0,0.3);
}

响应式调整

根据不同屏幕尺寸调整灯笼大小：

@media (max-width: 600px) {
  .lantern {
    width: 80px;
    height: 120px;
  }
  .middle {
    height: 80px;
  }
}

这种方法利用CSS的径向渐变模拟灯笼的发光效果，配合阴影和动画创造动态视觉体验。颜色值可根据需要调整，红色系（#d63031、#ff7675）与金色系（#ffeaa7、#fdcb6e）的搭配能呈现传统灯笼的典型色彩。