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实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...
随机推荐
- 二进制免编译My SQL
一 下载 MySQL 安装包教程 https://blog.csdn.net/zhan107876/article/details/100701135 ll -h mysql-5.6.47-linux ...
- 日常Java 2021/10/4
读取控制台输入 将System.in包装在BufferedReader对象中来创建一个字符流 BufferedReader b = new BufferedReader(new InputStream ...
- 为构建大型复杂系统而生的微服务框架 Erda Infra
作者|宋瑞国(尘醉) 来源|尔达 Erda 公众号 导读:Erda Infra 微服务框架是从 Erda 项目演进而来,并且完全开源.Erda 基于 Erda Infra 框架完成了大型复杂项目的 ...
- A Child's History of England.23
King William, fearing he might lose his conquest, came back, and tried to pacify the London people b ...
- FileReader (三) - 网页拖拽并预显示图片简单实现
以下是一个很贱很简单的一个 在网页上图拽图片并预显示的demo. 我是从https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Stat ...
- Linux系统信息查看命令(ZZ)
http://hi.baidu.com/thinkdifferent/blog/item/22f4a80161630e011d958384.html转自一个baidu师兄的博客,很好的一个总结,推荐下 ...
- 【Linux】【Services】【SaaS】Docker+kubernetes(10. 利用反向代理实现服务高可用)
1. 简介 1.1. 由于K8S并没有自己的集群,所以需要借助其他软件来实现,公司的生产环境使用的是Nginx,想要支持TCP转发要额外安装模块,测试环境中我就使用HAPROXY了 1.2. 由于是做 ...
- APICloud - 提交项目 点击右键 没有git这个选项
你们是不是也遇到过这个问题,吧项目检出来后,花了很久的时间,好不容易吧项目改完,提交的时候点击鼠标右键,发现git选项没有在里面了,找不到,但是这个问题也不是很常遇到,机率很小,下面我来告诉你们吧 原 ...
- 13.Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽 ...
- 漏洞扫描器-AWVS
目录 介绍 漏洞扫描 网络爬虫==漏洞分析.验证 主机发现 子域名探测 SQL注入 HTTP头编辑 HTTP监听 介绍 AWVS为Acunetix Web Vulnarability Scanner的 ...