当前位置：首页 > CSS

css制作烛光

2026-02-12 19:28:57CSS

烛光效果的CSS实现

使用CSS创建烛光效果可以通过阴影、渐变和动画来模拟火焰的摇曳感。以下是几种常见方法：

方法一：使用box-shadow和动画

.candle-flame {
  width: 20px;
  height: 40px;
  background: #ff9900;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 
    0 0 20px 10px #ff9900,
    0 0 40px 20px #ff6600,
    0 0 60px 30px #ff3300;
  animation: flicker 2s infinite alternate;
}

@keyframes flicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

方法二：结合伪元素增强效果

.candle {
  position: relative;
  width: 30px;
  height: 80px;
  background: linear-gradient(to right, #c0c0c0, #e0e0e0);
}

.candle::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 30px;
  background: linear-gradient(to top, #ff3300, #ffcc00);
  border-radius: 50% 50% 20% 20%;
  filter: blur(5px);
  animation: sway 3s ease-in-out infinite alternate;
}

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

方法三：使用CSS滤镜增强真实感

css制作烛光

.flame {
  width: 25px;
  height: 50px;
  background: radial-gradient(ellipse at center, 
    #ffffff 0%, 
    #ffcc00 70%, 
    #ff6600 100%);
  border-radius: 50%;
  filter: blur(5px) brightness(1.2);
  animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

完整蜡烛结构示例

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

<style>
.candle {
  position: relative;
  width: 40px;
  height: 120px;
  margin: 50px auto;
}

.wick {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 3px;
  height: 15px;
  background: #333;
  transform: translateX(-50%);
}

.flame {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 20px;
  height: 50px;
  background: linear-gradient(to top, #ff3300, #ffcc00);
  border-radius: 50% 50% 20% 20%;
  transform: translateX(-50%);
  filter: blur(5px);
  animation: flicker 2s ease-in-out infinite alternate;
}

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

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  25% { transform: translateX(-50%) scaleY(1.1) scaleX(0.9); }
  50% { transform: translateX(-50%) scaleY(0.95) scaleX(1.05); }
  75% { transform: translateX(-50%) scaleY(1.05) scaleX(0.95); }
}
</style>

这些方法可以根据需要调整颜色、大小和动画参数来获得更逼真的烛光效果。关键点在于使用多层阴影、渐变和柔化边缘来模拟火焰的发光特性，并通过动画创造自然的摇曳感。