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技巧组合可以创建出逼真的烛光效果，通过调整动画参数、颜色和形状可以获得不同风格的火焰效果。
