当前位置：首页 > CSS

css制作烛光

2026-02-27 04:06:46CSS

使用CSS制作烛光效果

通过CSS的动画、渐变和阴影效果可以模拟烛光的动态摇曳效果。以下是实现方法：

HTML结构

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

CSS样式

.candle {
  position: relative;
  width: 60px;
  height: 120px;
}

.flame {
  position: absolute;
  width: 30px;
  height: 60px;
  background: linear-gradient(to top, #ff7800, #ffec00);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 20px #ff7800, 0 0 60px #ffec00;
  top: -50px;
  left: 15px;
  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);
    opacity: 0.8;
  }
}

.wick {
  position: absolute;
  width: 4px;
  height: 20px;
  background: #333;
  top: -20px;
  left: 28px;
}

.wax {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #e0a080, #f0c0a0);
  border-radius: 5px;
}

增强烛光效果

为了使烛光更加逼真，可以添加更多动画细节：

.flame::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 30px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  top: 10px;
  left: 7px;
  filter: blur(5px);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
}

添加融化效果

蜡烛燃烧时的融化效果可以通过伪元素实现：

.wax::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 10px;
  background: rgba(240, 192, 160, 0.6);
  border-radius: 50%;
  bottom: -5px;
  left: 10px;
  filter: blur(3px);
}

这些CSS技巧组合起来可以创建出逼真的烛光动画效果。通过调整颜色、大小和动画参数，可以获得不同的视觉效果。

css制作烛光