粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画次要由 Canvas、WebGL 实现。
当然,不应用 HTML + CSS 的次要起因在于,粒子动画通常须要较多的粒子,而如果应用 HTML + CSS 的话势必须要过多的 DOM 元素,这也就导致了应用 HTML + CSS 构建的粒子动画在性能上毫无劣势。
当然,如果仅仅是从成果的角度而言,应用 CSS 构建的粒子动画一样能够做到十分的令人震撼。
本文,将尝试利用 CSS 来构建粒子动画。
工欲善其事必先利其器
OK,绘制 CSS 粒子动画首先须要有好的工具。本文将会持续借助 CSS-Doodle 实现所有的性能。然而请留神,CSS-Doodle 你能够了解为一个语法糖库,应用它实现的所有成果,都能够用 CSS + HTML(兴许有一些会加上一点 SVG)复现。
简略而言,CSS-doodle 它是一个基于 Web-Component 的库。容许咱们疾速的创立基于 CSS Grid 布局的页面,并且提供各种便捷的指令及函数(随机、循环等等),让咱们能通过一套规定,失去不同 CSS 成果。能够简略看看它的主页 — Home Page of CSS-doodle,只须要 5min 兴许就能疾速上手。
应用 CSS-Doodle 构建粒子
要实现粒子动画,那么第一步,咱们须要失去大量的粒子。应用 CSS 实现的话,也就是咱们须要大量的 DOM。
借助,CSS-Doodle 的 Grid 布局语法,咱们能够疾速失去大量的 DOM,当然形式有十分多。
当初咱们假如咱们须要 10000 个粒子,咱们只须要实现一个 100×100 的 Grid 布局即可,应用 CSS-Doodle 的话,语法如下:
<css-doodle grid="100x100">
:doodle {@size: 100vw 100vmin;}
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
background: #000;
border-radius: 50%;
</css-doodle>
简略解释下下面的代码:
grid="100x100"
示意实现一个 100×100 的 Grid 布局@size: 100vw 100vmin
示意 Grid 布局的高宽别离为 100vw 和 100vh,也就是占满整个屏幕- 剩下的代码比拟好了解,它会赋值给每一个 Grid item,相当于 10000 个 Grid item 都是一个 2×2 的圆球,并且定位在页面两头
整个成果如下:
你没有看错,因为所有的粒子都叠在一个点了,所以的确只有一个点。
至此,咱们就失去了 10000 个汇集在一起的粒子。
实现 2D 粒子成果
有了 10000 个汇集在一起的粒子,咱们给每个粒子增加任意不同的属性,就能够失去各种不同的粒子成果了。
为了让粒子看得清,第一步,咱们让粒子散开,这里只须要扭转下面代码中的 top
、left
定位即可(利用 transform 也能够):
<css-doodle grid="100x100">
// ... 其余与上述保持一致
top: @r(1%, 100%);
left: @r(1%, 100%);
// ... 其余与上述保持一致
</css-doodle>
CSS-Doodle 中,
@r()
办法能够用于获取随机数,这里就是示意获取 1% ~ 100% 内的随机数
这里,咱们做的事件只是让每一个粒子的 top、left 随机落在 1%
~ 100%
,这样咱们就能看清不同的粒子散布了:
好吧,到这里,美感 还没体现进去。
别着急,咱们尝试随机放大放大每个粒子,并且,给它们赋予不同的色彩:
<css-doodle grid="100x100">
// ... 其余与上述保持一致
background: hsl(@r(1, 255, 3), @r(10%, 90%), @r(10%, 90%));
transform: scale(@rn(.1, 5, 3));
</css-doodle>
这样,咱们的粒子就变成了这样:
好,看着像那么回事了。当然,粒子动画怎么能少了动画,接下来的一步,咱们须要让粒子动起来,因为动画须要用到 transform: translate()
,然而咱们下面又用到了 scale()
,为了缩小代码量,这里我会把缩放的操作交给 zoom
属性来实现,这样一来,残缺的代码如下:
<css-doodle grid="100x100">
:doodle {
@size: 100vw 100vmin;
perspective: 10px;
}
position: absolute;
top: @r(1%, 100%);
left: @r(1%, 100%);
width: 2px;
height: 2px;
background: #000;
border-radius: 50%;
background: hsl(@r(1, 255, 3), @r(10%, 90%), @r(10%, 90%));
transform: rotate(@r(360deg)) translate(@r(-50, 50)vmin, @r(-50, 50)vmin);
animation: move 3s infinite linear alternate;
zoom: @rn(.1, 5, 3);
@keyframes move {
100% {transform: rotate(0) translate(0, 0);
}
}
</css-doodle>
成果如下:
看着还挺不错,然而因为所有粒子的动画工夫都是一样的,所以动画起始帧和完结帧非常明显,咱们再革新下 animation
:
<css-doodle grid="100x100">
- animation: move 3s infinite linear alternate;
+ animation: move @r(5, 15)s infinite @r(-10, 0)s @p(linear, ease-in, ease-in-out) alternate;
</css-doodle>
这样,动画工夫,负延迟时间(提前开始),以及动画缓动都设置成了对每个粒子都随机,这样,整体成果将会好上不少,不会呈现显著的进展或者漏洞:
残缺的代码,你能够戳这里:CSS Doodle – CSS Pattern Effect
当然,咱们齐全能够换一个配色,彩色底色配合上 box-shadow()
,让每一个元素发光发亮,这样,咱们就失去了这样一个成果:
残缺的代码,你能够戳这里:CSS Doodle – CSS Pattern Effect
柏林噪声配合 3D 实现粒子动效
还记得咱们在 利用噪声构建美好的 CSS 图形 一文中提到柏林噪声吗?
柏林噪声 基于随机,并在此基础上利用缓动曲线进行平滑插值,使得最终失去噪声成果更加趋于天然。
它的作用在于,让咱们产生的随机是不是齐全随机的,而是可能像木头纹理、山脉起伏的变动般,存在肯定的规律性!
基于柏林噪声,咱们再在 2D 粒子动画的根底上,引入 CSS 3D,实现 3D 粒子动效。
咱们来看看,此时,咱们不再随机定位每一个粒子,而是利用柏林噪声去散布咱们的粒子:
是的,在 CSS Doodle 中,咱们应用
@rn()
代替@r()
,即可让随机的后果基于 Grid item 的地位关系产生关联。
<css-doodle grid="100x100">
:doodle {
@size: 100vw 100vmin;
perspective: 10px;
}
:container {
perspective: 100px;
transform-style: preserve-3d;
}
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
left: 50%;
top: 50%;
background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
</css-doodle>
咱们在 3D 场景下,利用柏林噪声布局咱们的粒子系统,让它们相邻之间的色彩,定位都是存在肯定的关联性。自身,每一次随机,都是一副美好的画作,感触下:
当然,这还没完,咱们要让它们动起来。增加什么好呢?其实加什么都十分 NICE,这里,咱们尝试让他们有法则的高低律动,当然,也须要用到 柏林噪声,这样残缺的代码就会变成:
<css-doodle grid="100x100">
:doodle {
@size: 100vw 100vmin;
perspective: 10px;
}
:container {
perspective: 50px;
transform-style: preserve-3d;
}
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
left: 50%;
top: 50%;
background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
box-shadow: 0 0 1px #fff, 0 0 5px #fff;
@keyframes move {
100% {margin-top: 500px;}
}
</css-doodle>
OK,会是什么样一副现象呢?让咱们来看看:
能够看到,利用 柏林噪声 生成的粒子成果,更加的实在,看上去更加的带感。
残缺的代码,你能够戳这里:CSS Doodle – CSS Pattern Effect
当然,把握了这个技巧之后,咱们能够尝试其余增加其余属性的动画,那么可能咱们会失去这样的动画:
残缺的代码,你能够戳这里:CSS Doodle – CSS Pattern Effect
亦或,咱们尝试实现另外一种时空穿梭的感觉:
<css-doodle grid="30x30">
:doodle {@size: 100vw 100vmin;}
:container {
perspective: 500px;
transform-style: preserve-3d;
transform: rotate3d(@r(-1.5, 1.5), @r(-1.5, 1.5), @r(-1.5, 1.5), @r(0, 30)deg);
}
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
top: @r(50, 50)%;
left: @r(50, 50)%;
background: hsl(@rn(160, 170, 3), @r(90%, 99%), @rn(50%, 70%));
animation: move @r(5, 30)s infinite @r(-30, -15)s @p(linear, ease-in, ease-in-out);
transform: scale(@rn(.1, 1)) rotate(0) translate3d(@r(-60vmin, 60vmin), @r(-60vmin, 60vmin), @r(-1500, -2000)px);
box-shadow:
0 0 0.5px #fff,
0 0 2px #fff,
0 0 5px #fff;
@keyframes move {
100% {transform: scale(10) rotate(1080deg) translate3d(0, 0, @r(710, 850)px);
}
}
</css-doodle>
成果如下:
残缺的代码,你能够戳这里:CSS Doodle – CSS Pattern Effect
CSS-Doodle 库的作者,袁川老师,也有十分多 3D 粒子动画,其中一幅:
残缺的代码 CSS Doodle – Seeding By yuanchuan
其实还有十分多属性适宜增加到整个粒子系统中,本文只是抛砖引玉,只尝试了 CSS 中很少的属性。是的,CSS 一样能够实现这些超酷炫的粒子动效,如果你也心动了,无妨下来本人尝试下。置信你会喜爱上 CSS。
最初
本文到此结束,心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。