十分钟教你使用css实现烟雾效果

WBOY

发布时间：2022-01-14 18:08:25

3495人浏览过

来源于掘金

转载

本篇文章给大家分享怎样利用css实现烟雾的效果，希望对大家有帮助。

十分钟教你使用css实现烟雾效果

仔细观察烟雾效果，有两个比较重要的特点：

模糊效果
颗粒感

立即学习“前端免费学习笔记（深入）”；

首先看模糊效果，想到模糊，大部分同学首先都会想到使用 filter: blur() 。

当然没错，不过在 CSS 中，除了滤镜，我们还能使用一类其他手段去模拟模糊的效果。

纯 CSS 实现烟雾动画

我们首先来看这样一个效果：

+1.gif

假设，我们有这样一个字符：

我们仅仅是通过 text-shadow + opacity 的变化，就能模拟烟雾的效果：

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}
@keyframes smoky {
  to {
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

在上述的基础上，我们可以加上位移、旋转、缩放，稍微改造一下上述代码，添加一些 transform 变换：

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}
@keyframes smoky {
  to {
    transform:
      translate3d(200px, -80px, 0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

就可以得到如下效果：

+2.gif

叠加了 transform 之后，就很有一个字被吹跑，变成烟雾的感觉。在此基础之上，我们只需要将多个字放在一起，利用 animation-delay 顺序控制每个字触发动画效果，即可得到上述的完整烟雾效果。

伪代码如下：


    C
    S
    S
    // ...

// ... 上述所有 CSS 代码
@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(($item/10))}s; 
  }
}

借助 SVG feturbulence 滤镜实现烟雾效果

上述的烟雾动画的烟雾还是比较粗糙的。主要是缺少了一点颗粒感？缺少了一些烟雾的质感。

想要实现更为精致的烟雾效果，我们还得借助 SVG 的滤镜

接下来会使用 filter: blur() 配合滤镜，得到更为逼真的烟雾效果。

举个简单的例子，假设有这样几个字：

SMOKE

简单的 CSS：

考拉新媒体导航

考拉新媒体导航——新媒体人的专属门户网站

下载

div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

得到这样几个带渐变色字：

+3.png

我们利用滤镜简单处理一下：

SMOKE

CSS 的中利用 filter: url() 引入该滤镜，这里为了效果更好，我直接在

上引入了该滤镜：

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

我们的字体就被滤镜赋予了一种流体的感觉：

+4.png

这个效果可以说和烟雾效果基本没什么关系，不过只需要再添加一个模糊滤镜，神奇的事情就发生了：

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}

整个效果就瞬间烟雾化了很多：

+5.png

好，给它添加上循环的动画效果，简单的借助 JavaScript 处理一下：

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;
function freqAnimation() {
    frames += .2
    bfx = 0.03;
    bfy = 0.03;
    bfx += 0.005 * Math.cos(frames * rad);
    bfy += 0.005 * Math.sin(frames * rad);
    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);
    window.requestAnimationFrame(freqAnimation);
}
window.requestAnimationFrame(freqAnimation);

看看效果：

+6.gif

当然，上述效果可以通过：

控制的 baseFrequency 属性调节

控制的 numOctaves 属性调节

控制的 scale 属性调节

将的 numOctaves 属性由 30 改成 70，基本就看不到文字的轮廓了，文字整个雾化。我们可以制作类似这样的 hover 效果：

+7.gif

上述完整代码，你可以猛击这里：CodePen CSS + SVG Text Smoke Hover Effect

这样，基于 filter: blur() 配合滤镜，我们可以得到非常逼真的烟雾效果，基于上述的演示，我们还可以再挖掘非常多有意思的效果，本文就不再赘述

（学习视频分享：css视频教程）

如何使用 CSS Grid 实现复杂的网格布局？

如何解决不同CSS文件中的样式冲突？

CSS 样式覆盖优先级规则如何判断与解决冲突？

如何确保页面在不同分辨率的手机上都能完美适配？

前端性能优化中，减少页面加载时间的具体策略有哪些？

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：技术解答之JavaScript的执行机制下一篇：html5新特性中移除了哪些元素

作者最新文章

夸克浏览器AI搜索最新版教学_探索夸克AI搜索的隐藏功能

2025-10-24 20:48

夸克浏览器怎么用AI搜索_夸克AI搜索正确提问方式教学

2025-10-25 23:12

微信朋友圈怎么设置定时发布微信朋友圈定时发送图文教程

2026-01-02 09:14

微信朋友圈怎么定时发送微信朋友圈定时发布设置方法【教程】

2026-01-06 09:59

苹果手机怎么定时发朋友圈 iPhone微信朋友圈自动发布方法【步骤】

2026-01-08 11:11

微信朋友圈能定时发送吗微信朋友圈定时发送功能开启方法

2026-01-09 08:15

微信朋友圈草稿箱怎么用微信朋友圈定时发送隐藏技巧

2026-01-10 08:41

微信朋友圈定时发送是真的吗微信朋友圈预约发布实现方法

2026-01-15 10:19

微信定时发朋友圈怎么弄微信朋友圈自动推送设置流程

2026-01-21 04:27

微信如何定时发朋友圈微信朋友圈自动定时发送设置步骤【汇总】

2026-01-23 10:22

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29