Amazing!!CSS 也能实现烟雾效果?
最近利用 CSS 实现了一些看似超出 CSS 能力的效果:
本文继续此系列,本文主要想探讨一下,使用 CSS 能否比较好的实现一些烟雾效果。像是这样:
仔细观察烟雾效果,有两个比较重要的特点:
- 模糊效果
- 颗粒感
首先看模糊效果,想到模糊,大部分同学首先都会想到使用 filter: blur()
。
当然没错,不过在 CSS 中,除了滤镜,我们还能使用一类其他手段去模拟模糊的效果。
纯 CSS 实现烟雾动画
我们首先来看这样一个效果:
假设,我们有这样一个字符:
<span>C</span>
我们仅仅是通过 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;
}
}
就可以得到如下效果:
叠加了 transform
之后,就很有一个字被吹跑,变成烟雾的感觉。在此基础之上,我们只需要将多个字放在一起,利用 animation-delay
顺序控制每个字触发动画效果,即可得到上述的完整烟雾效果。
伪代码如下:
<div>
<span>C</span>
<span>S</span>
<span>S</span>
// ...
</div>
// ... 上述所有 CSS 代码
@for $item from 1 through 21 {
span:nth-of-type(#{$item}){
animation-delay: #{(($item/10))}s;
}
}
就可以得到这样一个被风吹跑的字,幻化成烟雾的效果:
上述效果并非我原创,最早见于这位作者 -- CodePen Demo -- Smoky Text By Bennett Feely
借助 SVG feturbulence 滤镜实现烟雾效果
上述的烟雾动画的烟雾还是比较粗糙的。主要是缺少了一点颗粒感?缺少了一些烟雾的质感。
想要实现更为精致的烟雾效果,我们还得借助 SVG 的 <feturbulence>
滤镜,对这个滤镜还不太了解的,可以看看我的这几篇文章:
接下来会使用 filter: blur()
配合 <feturbulence>
滤镜,得到更为逼真的烟雾效果。
举个简单的例子,假设有这样几个字:
<div">SMOKE</div>
简单的 CSS:
div {
background: linear-gradient(#fff, #999, #ddd, #888);
background-clip: text;
}
得到这样几个带渐变色字:
我们利用 <feturbulence>
滤镜简单处理一下:
<div>SMOKE</div>
<svg width="0">
<filter id="filter">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
<feDisplacementMap in="SourceGraphic" scale="30" />
</filter>
</svg>
CSS 的中利用 filter: url()
引入该滤镜,这里为了效果更好,我直接在 <body>
上引入了该滤镜:
body {
filter: url('#filter');
}
div {
background: linear-gradient(#fff, #999, #ddd, #888);
background-clip: text;
}
我们的字体就被 <feturbulence>
滤镜 赋予了一种流体的感觉:
这个效果可以说和烟雾效果基本没什么关系,不过只需要再添加一个模糊滤镜,神奇的事情就发生了:
body {
filter: url('#filter');
}
div {
background: linear-gradient(#fff, #999, #ddd, #888);
background-clip: text;
filter: blur(5px);
}
整个效果就瞬间烟雾化了很多:
好,给它添加上循环的动画效果,简单的借助 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);
看看效果:
上述完整代码,你可以猛击这里:CodePen CSS + SVG Text Smoke Effect
当然,上述效果可以通过:
- 控制
<feTurbulence>
的baseFrequency
属性调节 - 控制
<feTurbulence>
的numOctaves
属性调节 - 控制
<feDisplacementMap>
的scale
属性调节
将 <feTurbulence>
的 numOctaves
属性由 30 改成 70,基本就看不到文字的轮廓了,文字整个雾化。我们可以制作类似这样的 hover 效果:
上述完整代码,你可以猛击这里:CodePen CSS + SVG Text Smoke Hover Effect
这样,基于 filter: blur()
配合 <feturbulence>
滤镜,我们可以得到非常逼真的烟雾效果,基于上述的演示,我们还可以再挖掘非常多有意思的效果,本文就不再赘述。
最后
好了,本文到此结束,希望本文对你有所帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
Amazing!!CSS 也能实现烟雾效果?的更多相关文章
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Codrops 优秀教程:CSS 3D Transforms 实现书本效果
这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- CSS 实现的各种球体效果
CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...
- CSS 实现滚动进度条效果
参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...
随机推荐
- linux系统中安装MySQL
linux系统中安装MySQL 检查原来linux系统中安装的版本 rpm -qa | grep mysql 将其卸载掉 以 mysql-libs-5.1.71-1.el6.x86_64 版本为例 r ...
- 多线程高级篇1 — JUC — 只弄到处理高并发集合问题
1.线程池 1.1).什么是线程池? 池( pool ),就是一个容器,所以线程池就是把多个线程对象放到一个容器中 1.2).如何创建线程池? 先来了解几个常识 Executor -- 这是一个接口( ...
- 日常Java 2021/10/10
多态就是同一个行为具有多个不同表现形式的能力 多态就是同一个接口,使用不同的实例而执行不同操作 多态的优点 1.消除类型之间的耦合关系 2.可替换性 3.可扩充性 4.接口性 5.灵活性 6.简化性 ...
- SpringAOP浅析
1.问题 问题:想要添加日志记录.性能监控.安全监测 2.最初解决方案 2.1.最初解决方案 缺点:太多重复代码,且紧耦合 2.2.抽象类进行共性设计,子类进行个性设计,此处不讲解,缺点一荣俱荣,一损 ...
- 【Java 8】Stream中的Pipeline理解
基于下面一段代码: public static void main(String[] args) { List<String> list = Arrays.asList("123 ...
- 初步接触Linux命令
目录 虚拟机快照 1.首先将已经运行的系统关机 2.找到快照 拍摄快照 3.找到克隆 下一步 有几个快照会显示几个 4.克隆完成后 要修改一下IP 不然无法同时运行两个虚拟机系统 系统介绍 1.pin ...
- seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案
seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案 说明: 之所以只用nacos进行了注册与发现,因为seata使用naco ...
- 20 个 .NET 6 新增的 API
DateOnly & TimeOnly .NET 6 引入了两种期待已久的类型 - DateOnly 和 TimeOnly, 它们分别代表DateTime的日期和时间部分. DateOnly ...
- Svelte入门——Web Components实现跨框架组件复用(二)
在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...
- Python语法之变量
一.变量简介 1.什么是变量 变量即变化的量,用于记录事物的某种状态,比如人的年龄.性别,游戏角色的等级.金钱. 2.如何使用变量 日常生活中: 姓名:Jason 年龄:18 爱好:音乐 程序中: u ...