css制作烛光

使用CSS制作烛光效果

CSS可以通过动画和渐变效果模拟烛光的摇曳效果。以下是实现烛光效果的关键步骤：

HTML结构

<div class="candle">
  <div class="flame"></div>
</div>

CSS样式

.candle {
  position: relative;
  width: 60px;
  height: 120px;
  background: #f5d6b6;
  border-radius: 5px;
}

.flame {
  position: absolute;
  top: -50px;
  left: 20px;
  width: 20px;
  height: 50px;
  background: linear-gradient(to top, #ff7800, #ffdc00, white);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 20px #ff6600, 0 0 60px #ff6600, 0 0 100px #ffcc00;
  transform-origin: center bottom;
  animation: flicker 2s ease-in-out infinite alternate;
}

动画效果

@keyframes flicker {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9) rotate(2deg);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.1) rotate(-1deg);
    opacity: 1;
  }
}

增强烛光效果

为让烛光更逼真，可以添加以下额外效果：

添加烛芯

.candle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 29px;
  width: 2px;
  height: 15px;
  background: #333;
}

蜡烛融化效果

.candle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 40px;
  height: 10px;
  background: rgba(255, 120, 0, 0.3);
  border-radius: 50%;
}

调整火焰颜色 通过修改渐变颜色可以改变火焰外观：

background: linear-gradient(to top, #ff3300, #ff9900, #ffff66);

响应式烛光

让烛光对鼠标移动有反应：

.flame {
  transition: transform 0.2s;
}

.candle:hover .flame {
  transform: rotate(5deg) scale(1.2);
}

这些CSS技巧组合可以创建出逼真的烛光效果，通过调整动画参数、颜色和形状可以获得不同风格的火焰效果。