css烟雾动画的核心技术包括：1. 使用@keyframes定义动画关键帧，控制烟雾从生成到消散的全过程；2. 利用transform实现烟雾的位移、缩放和旋转，提升动画性能；3. 通过opacity控制烟雾的渐显与渐隐；4. 运用filter: blur()增强烟雾扩散的模糊效果；5. 结合radial-gradient和border-radius塑造烟雾团的形态；6. 采用多个烟雾元素配合animation-delay实现此起彼伏的动态效果。这些技术共同作用，可在不依赖javascript的情况下实现轻量且流畅的烟雾动画，适用于背景装饰或过渡效果，以完整句⼦结束。
要在HTML中制作烟雾动画，并在CSS中实现这种效果，核心在于利用CSS的动画属性（
animation
）和关键帧（
@keyframes
），结合元素的透明度（
opacity
）、变换（
transform
）以及模糊滤镜（
filter: blur()
）来模拟烟雾的升腾、扩散与消散。HTML提供承载这些视觉效果的结构，而所有的动态与形态塑造，都由CSS一手包办。
实现烟雾效果，说起来不难，但要做出那种飘渺、不规则的感觉，确实需要一些心思。我通常会从一个基本的“烟雾团”开始，然后让它动起来。
你需要一些HTML元素作为烟雾的载体。可以是一个简单的
div
，或者多个
span
，甚至伪元素。我个人比较喜欢用伪元素，因为它们不增加DOM负担，而且能很好地与父元素关联。
立即学习“前端免费学习笔记（深入）”；
<div class="smoke-container"> <div class="smoke-puff"></div> <div class="smoke-puff delay-1"></div> <div class="smoke-puff delay-2"></div> </div>
接着，就是CSS的魔法了。关键在于定义烟雾的初始形态，然后通过
@keyframes
来描述它在时间轴上的变化。
.smoke-container { position: relative; width: 200px; /* 根据需要调整 */ height: 150px; overflow: hidden; /* 确保烟雾不会溢出容器 */ /* 可以添加背景色或其他元素，让烟雾效果更明显 */ } .smoke-puff { position: absolute; bottom: 0; /* 从底部升起 */ left: 50%; transform: translateX(-50%) scale(0.5); /* 初始小一些 */ width: 80px; height: 80px; background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%); /* 模拟烟雾的圆形渐变 */ border-radius: 50%; /* 圆形 */ filter: blur(5px); /* 初始模糊 */ opacity: 0; /* 初始不可见 */ animation: smoke-rise 8s infinite ease-out; /* 动画定义 */ } /* 动画延迟，让烟雾此起彼伏 */ .delay-1 { animation-delay: 2s; } .delay-2 { animation-delay: 4s; } @keyframes smoke-rise { 0% { transform: translateX(-50%) scale(0.5); opacity: 0; filter: blur(5px); } 20% { opacity: 0.8; transform: translateX(-50%) scale(0.8); } 100% { transform: translateX(-50%) translateY(-150px) scale(1.5); /* 向上移动并变大 */ opacity: 0; /* 最终消散 */ filter: blur(15px); /* 变得更模糊 */ } }
这个例子只是一个起点。烟雾的形态、运动轨迹、消散速度，都可以通过调整
background
、
border-radius
、
transform
和
opacity
的关键帧百分比来精细控制。比如，你可以让它左右飘忽一点，或者变形成椭圆，甚至使用多层伪元素叠加，制造更复杂的层次感。
CSS烟雾动画的核心技术有哪些？
在我看来，CSS烟雾动画的核心，无非是那几个老伙计的巧妙组合。
@keyframes
规则是动画的灵魂，它定义了元素在不同时间点（0%到100%）的状态。烟雾的从无到有、从底部升起、变大、变淡、变模糊，所有这些视觉上的“叙事”都由关键帧来完成。你可以控制它的
transform
（位移、缩放、旋转），
opacity
（透明度），以及
filter
（模糊度）。
transform
属性。烟雾的上升、扩散，甚至轻微的左右摇摆，都离不开
translate
、
scale
甚至
rotate
。用
transform
来做动画，性能上通常比直接改变
top
/
left
要好，因为它能触发硬件加速。
opacity
属性。烟雾的出现与消散，完全依赖于透明度的变化。从0到1，再从1到0，模拟了烟雾从生成到最终消失的过程。
filter
属性，特别是
blur()
，对于烟雾这种虚无缥缈的物体来说简直是神来之笔。烟雾越往上飘，越扩散，通常看起来就越模糊。通过在动画过程中动态调整模糊值，能极大增强烟雾的真实感和层次感。
别忘了
background
和
border-radius
。虽然它们不是动画属性，但它们决定了烟雾“团”的初始形状和质感。一个柔和的径向渐变（
radial-gradient
）加上
border-radius: 50%
，能很好地模拟出烟雾那种不规则又带点团状的初期形态。而多个烟雾团叠加，配合不同的动画延迟，就能创造出那种此起彼伏、连绵不绝的烟雾效果了。
如何优化CSS烟雾动画的性能？
谈到动画性能，这可是一个老生常谈的话题，但对于烟雾这种需要持续渲染、且可能元素较多的动画来说，优化就显得尤为重要了。毕竟，谁也不想看到一个卡顿的烟雾效果。
一个比较直接的思路是，尽可能使用
transform
和
opacity
进行动画。这两个属性的改变通常不会引起浏览器重新计算布局（reflow），而是直接在GPU上进行合成（composite），所以性能会好很多。避免动画
width
、
height
、
top
、
left
等属性，它们会频繁触发布局重绘，导致页面卡顿。
可以考虑合理控制烟雾元素的数量。虽然多一些烟雾团能让效果更丰富，但每个烟雾团都是一个DOM元素，过多的元素和动画会增加浏览器的负担。如果效果允许，可以尝试用更少的元素，通过更复杂的动画逻辑来模拟更多的烟雾。
利用
will-change
属性也是一个不错的策略。这个属性可以提前告诉浏览器，某个元素将要发生特定的变化（比如
transform
或
opacity
），浏览器可以提前进行一些优化，为即将到来的动画做好准备。但要注意，不要滥用
will-change
，因为它也可能消耗额外资源。只在你确实知道某个元素会发生复杂动画时使用。
.smoke-puff { /* ...其他样式 */ will-change: transform, opacity, filter; /* 告诉浏览器这些属性将要变化 */ }
此外，注意动画的循环次数和时长。无限循环的动画虽然方便，但在某些低性能设备上可能会持续消耗资源。如果不是必须，可以考虑有限次循环或者在动画结束后移除元素。动画时长也不宜过短，过快的动画可能导致浏览器渲染压力增大。
最后，测试！ 在不同的浏览器和设备上测试你的烟雾动画。PC端看起来流畅的效果，在移动端可能就卡成PPT了。实践是检验性能的唯一标准。
除了CSS，还有哪些方法可以实现更复杂的烟雾效果？
CSS在实现烟雾动画方面确实很强大，但它也有自己的局限性。比如，要模拟那种真正随机、飘忽不定、粒子化的烟雾，或者与用户交互的烟雾，CSS就显得有些力不从心了。这时候，我们通常会转向更强大的工具。
SVG滤镜是一个值得探索的方向。SVG（可缩放矢量图形）本身就支持各种滤镜，比如
feTurbulence
（用于生成Perlin噪声，模拟不规则的纹理）和
feDisplacementMap
（根据一张图的颜色值来位移另一张图的像素）。结合这些滤镜，你可以创造出比纯CSS更具“有机感”和不规则性的烟雾。通过SVG的
animate
标签或JavaScript来动态改变滤镜参数，就能实现动画效果。虽然学习曲线略陡，但效果往往惊艳。
<svg width="0" height="0" style="position:absolute;"> <filter id="smokeFilter"> <feTurbulence type="fractalNoise" baseFrequency="0.01 0.05" numOctaves="2" result="turbulence"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="G"/> </filter> </svg> <div class="complex-smoke" style="filter: url(#smokeFilter);"></div>
（这个SVG滤镜示例只是个引子，实际烟雾效果需要更复杂的组合和动画）
更进一步，HTML Canvas API是实现复杂粒子效果的利器。通过JavaScript在Canvas上绘制成千上万个小粒子，并控制它们的运动轨迹、大小、透明度、生命周期等，可以模拟出非常真实的烟雾、火焰或水波纹效果。每个粒子都可以有独立的随机行为，这使得烟雾看起来更加自然和不可预测。当然，这需要扎实的JavaScript和Canvas绘图知识，性能优化也需要
评论（已关闭）
评论已关闭