纯CSS火焰效果靠blur与contrast叠加实现：blur(12px)加contrast(25)在橙红三角基底上生成辉光，border-radius:45%和scaleX(0.35)软化轮廓，25–40个黑色粒子上浮模拟升腾感，filter仅作用于父容器且需同层叠上下文。
纯 CSS 实现“火焰燃烧感”不靠画火苗，而靠 filter: blur() 和 filter: contrast() 的叠加融合——这是最轻量、兼容性最好、也最容易失控的方案。
为什么 blur + contrast 能模拟火焰边缘
单独用 blur(10px) 会让色块边缘发虚、透明；单独用 contrast(30) 会压平灰阶、强化明暗交界。但两者合用时，模糊产生的过渡色被对比度“提亮+锐化”，在暖色区域自然浮出橙红光晕，视觉上就是火焰的呼吸感和边缘辉光。
- blur 值太小（如
blur(2px)）→ 边缘生硬，没“燃”起来 - blur 值太大（如
blur(25px)）→ 整体糊成一团，失去形状控制 - contrast 过低（
contrast(5)）→ 模糊残留太多，像蒙了层雾 - contrast 过高（
contrast(50)）→ 出现明显噪点或色带断裂
三角形火焰基底怎么写才不翻车
别用 clip-path 或 SVG —— 它们动起来卡顿、缩放失真。标准做法是用 border 技巧生成尖角三角形，再靠 transform 和 border-radius 软化轮廓：
.fire {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 160px solid #ff6b00;
border-radius: 45%;
transform: scaleX(0.35);
}
- 必须设
border-radius: 45%，否则尖角太硬，blur 后边缘发散不自然 -
transform: scaleX(0.35)是关键压缩比，低于 0.3 易变形，高于 0.5 火焰太宽 - 底色推荐用
#ff6b00（橙红）而非纯黄，避免 contrast 提亮后过曝
粒子动画怎么加才看起来在“升腾”
所谓“粒子”，其实是大量黑色小圆（.dot），藏在火焰三角内部，靠 translateY 上浮 + 随机 delay 制造不规则飘动感。blur+contrast 会让它们和底色融合出跳动的亮斑：
立即学习“前端免费学习笔记（深入）”；
.dot {
position: absolute;
bottom: -80px;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
animation: rise 2.5s ease-in forwards;
}
@keyframes rise {
to { transform: translateY(-240px); }
}
- 每个
.dot必须加不同animation-delay（比如从0s到1.2s随机），否则齐刷刷上升像电梯 - 粒子数量建议 25–40 个：少于 20 个显稀疏，多于 50 个易触发渲染瓶颈（尤其低端安卓）
- 不要给粒子加
filter—— 只对父容器（即.fire）加filter: blur(12px) contrast(25)，否则每粒子都模糊，性能爆炸
mix-blend-mode: screen 是锦上添花还是必须加
加 mix-blend-mode: screen 在深色背景上确实让火焰更通透、有“自发光”感，但它有硬伤：
- 在非黑色背景（比如灰色、图片）上会严重过曝，甚至完全看不见火焰
- 部分 iOS Safari 15.4 以下版本不支持该混合模式，直接降级为透明
- 若已用
background: linear-gradient渐变做火焰基底（而非 border 三角），screen会导致渐变断层
真正容易被忽略的是：所有动画元素（包括粒子）必须和火焰基底在同一 stacking context 内——这意味着不能用 z-index 分层，也不能把粒子塞进另一个 position: fixed 容器里，否则 blend mode 失效，blur 也不生效。
