css3 动态火焰 |css 重要的

.fire {
width: 60px;
height: 120px;
position: relative;
border-radius: 28px;
}
.fire:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle at center, yellow 20%, transparent);
transform: translateX(-50%);
animation: flame 1s ease-in-out infinite;
}
.fire:after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
width: 20px;
height: 20px;
background: radial-gradient(circle at center, yellow, transparent);
border-radius: 50%;
transform: translateX(-50%);
animation: flame-small 1s ease-in-out infinite;
}
@keyframes flame {
0% {
height: 0;
width: 0;
}
20% {
height: 40px;
width: 30px;
}
40% {
height: 60px;
width: 50px;
}
60% {
height: 80px;
width: 70px;
}
80% {
height: 100px;
width: 90px;
}
100% {
height: 120px;
width: 110px;
}
}
@keyframes flame-small {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
height: 20px;
width: 20px;
opacity: 1;
}
40% {
height: 30px;
width: 30px;
opacity: 0;
}
60% {
height: 40px;
width: 40px;
opacity: 1;
}
80% {
height: 50px;
width: 50px;
opacity: 0;
}
100% {
height: 60px;
width: 60px;
opacity: 1;
}
}

以上代码是实现 CSS3 动态火焰的核心代码，可以根据需求调整大小、变换颜色等相关参数。