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实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...
随机推荐
- SpringBoot Profiles 多环境配置及切换
目录 前言 默认环境配置 多环境配置 多环境切换 小结 前言 大部分情况下,我们开发的产品应用都会根据不同的目的,支持运行在不同的环境(Profile)下,比如: 开发环境(dev) 测试环境(tes ...
- Rational Rose的安装及使用教程(包括菜单命令解释、操作向导说明、快捷命令说明)
一.安装教程 我安装时用的是镜像文件,所以安装前需要辅助软件来处理镜像文件.我用到的是UltraISO.UltraISO中文名叫软碟通 是一款功能强大而又方便实用的光盘映像文件的制作/编辑/转换工具, ...
- 学习java 7.14
学习内容: 标准输入输出流 输出语言的本质:是一个标准的输出流 字节打印流 字符打印流 对象序列化流 明天内容: 进程和线程 遇到问题: 用对象序列化流序列化一个对象后,假如我们修改了对象所属的类文件 ...
- Spark基础:(三)Spark 键值对操作
1.pair RDD的简介 Spark为包含键值对类型的RDD提供了一些专有的操作,这些RDD就被称为pair RDD 那么如何创建pair RDD呢? 在不同的语言中有着不同的创建方式 在pytho ...
- Linux学习 - 数值运算
1 declare 声明变量类型 declare [+/-] [选项] 变量名 - 给变量设定类型属性 + 取消变量的类型属性 -i 将变量声明为整数型 -x 将变量声明为环境变量(同export) ...
- IntentFilter,PendingIntent
1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...
- jQuery 的两种语法
文档就绪事件(文档加载完成之后才执行jQuer代码): 第一种: $(document).ready(function() { // jQuery 代码.... }); 第二种: $(function ...
- 5.Vue.js-模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统 ...
- TV盒子 android 4.4安装kodi 和 安装jellyfin插件连接到 jellyfin服务器
很多IPTV盒子系统都是android 4.4的,无法安装新版kodi, 最高只能安装到改版的kodi, 版本是17.1,jellyfin插件也只能安装到0.5.8 首先下载kodi和jellyfin ...
- 前端避坑指南丨辛辛苦苦开发的 APP 竟然被判定为简单网页打包?
传统混合移动App开发模式,通常会使用WebView作为桥接层,但随着iOS和Android应用商店审核政策日趋严格,有时会被错误判定为简单网页打包成App,上架容易遭到拒绝. 既然可能存在风险,那我 ...