大家好,我是宝哥
最近我做了一个统计爬虫,专门统计公众号上前端开发号主发表文章的数据,后面可能会多多分享一些热门文章给你们。喜欢的话记得关注我,有哪些喜欢的前端号主也可以推荐给我。
今天分享一个用 CSS 实现魔幻数字动画场景,看完感觉 CSS 好神奇。喜欢本文记得文末点赞告诉我。
爬虫数据:阅读:677 在看:1 点赞: 11 评论: 0 all:12
最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」:
![2c2ab50403d3cb9b5c209b327f3b253a.png](https://i-blog.csdnimg.cn/blog_migrate/b0597bdbeccdfce27d5a29eb8af7630c.png)
场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震:
我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有 CSS 不能实现的?
本文,就将尝试使用 CSS,大致还原这个效果。
拆解动画效果
其实,上述的动画效果,本质就是一个 3D 立方体。
同时,3D 立方体上每个面存在颜色不一样的文字,文字和颜色都在随机变化。
也就是说,我们需要实现一个 3D 立方体:
同时,我们还需要实现这样一个动画效果 -- 文字和颜色都在随机变化的平面效果:
两者组合一下,再挪动 3D 元素的景深距离,就能实现我们想要的效果!
好,下面我们一个一个实现。
实现一个 3D 立方体
实现一个 3D 立方体,相对另外一个文字和颜色都在随机变化的平面效果而言,属于非常非常简单的一步了。
我们在非常多篇文章中也讲过具体的实现方式:
最常见的 3D 图形,莫过于一个 3D 立方体。
如果没有上下两个面,只是一个 4 个面的图形,大概是这样:
![efd2f002fef055d111f0aa1d3b5e3f6b.gif](https://i-blog.csdnimg.cn/blog_migrate/201135117e6e7adec07dd7c106d3c618.gif)
这样一个图形,利用 CSS 3D,如何快速实现呢?
首先,构造这么一个结构:
<div class="perspective">
<div class="container">
<div class="img">3</div>
<div class="img">D</div>
<div class="img">视</div>
<div class="img">图</div>
</div>
</div>
4 个面,就是最内层的 4 个 .img
,首先,需要给两个父容器,设置 3D 的属性:
.perspective {
perspective: 3000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
}
简单解释一下:
perspective
可以作用于元素的后代,设置在最上层即可;transform-style: preserve-3d
设置给最终需要 3D 空间的元素的父容器之上,由于最终是 4 个.img
需要 3D 空间,因此设置给.container
即可。
接下来,就是最为核心的,如何设置 4 个 .img
元素的 3D 变换,使之形成 3D 立方体。
技巧就是:先旋转,再位移。
这里给出一个俯视效果图:
![639017fc627c374df5948aa14e43d01d.png](https://i-blog.csdnimg.cn/blog_migrate/5169ba2fe52c401d865b36822fb4c06a.png)
以上述 Demo 中的正方体为例子,class 为 .img
的 div 块的高宽为 400px*400px
。那么要利用 4 个 这样的 div 拼接成一个正方体,需要分别将 4 个 div 绕 Y 轴旋转 [90°, 180°, 270°, 360°],再 translateY(200px)
。
值得注意的是,一定是先旋转角度,再偏移距离,这个顺序很重要。
代码如下:
.img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
}
@for $i from 1 through $imgCount {
.img:nth-child(#{$i}) {
transform: rotateY(($i * 90deg)) translateZ(200px);
}
}
效果如下:
![c24fda14ce9dcea0785268e9e24a510c.gif](https://i-blog.csdnimg.cn/blog_migrate/772d4db25d942fcf7b76763114a0b797.gif)
此时,可能会觉得图片太太太大了,此时,我们可以通过给中间层 .container
设置一个恰当的 translateZ
进行视觉大小上的调节。
.container {
transform: translateZ(-3000px);
}
这样,就能得到恰当大小的立方体元素效果:
![05d7b952c4706773bf1e1bcb58bff2ea.gif](https://i-blog.csdnimg.cn/blog_migrate/4f2c4e0109f895ccbdd8843c72e305dd.gif)
完整的代码,你可以戳这里:CodePen Demo -- 3D Cube(Demo 链接在下方参考资料)
当然,对于我们这个效果,我们 5 要五个面(前后左右与上方即可),因此,我们基于上述的基础知识铺垫,重新实现一个我们需要的框架结构:
<div class="perspective">
<div class="container">
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
</div>
</div>
并且,我们希望我们的图形是一个立方体,只需要稍微改造长宽和 translateZ()
的即可。这样,我们就能得到一个前后左右与上方 5 个面的立方体元素。
示意效果如下:
![73729390e253ee0644eebb882f5ba39d.gif](https://i-blog.csdnimg.cn/blog_migrate/04f2114438c558e41ba54020e4ecfb89.gif)
实现文字动画效果
OK,立方体我们先放在一边。
接下来,我们尝试来实现这个效果:
这个效果如果一个文字用一个 DIV 承载实现,那是非常容易的,但是这样势必会造成元素过多,再设置动画效果,则会导致页面太为卡顿。
所以,我们需要另辟蹊径。这里,我们可以使用多层渐变配合 background-clip: text
。
首先,我们利用等宽字体,随机实现一列文字:
<div>ABCDEFGHIJKLMN</div>
div {
font-family: monospace;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
color: #fff;
}
效果大致如下:
![94781fe85532d13ec0af4cbb49e2eb91.png](https://i-blog.csdnimg.cn/blog_migrate/74d6da7c5394b71583eec4eaafc6ce6c.png)
此时,如果我们再利用线性渐变,给每个字符的对应空间(也就 25px x 25px
),设置上不同的颜色,大概是这样:
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
div {
// ...
background: randomLinear(14);
}
其中,randomLinear(14)
是一个 SASS 函数,参数 14 表示生成 14 层线性渐变,每一个文字区域的颜色都是随机的,经过编译后的其中一种结果如下:
div {
// ...
background: linear-gradient(#feea96 0 25px, #edde42 0 50px, #e2344a 0 75px, #cdab7e 0 100px, #e16c8b 0 125px, #dcdc7d 0 150px, #dcb42a 0 175px, #d6a587 0 200px, #984f71 0 225px, #221e34 0 250px, #5e9a69 0 275px, #a955e4 0 300px, #4e908f 0 325px, #8d177e 0 350px);
}
上面,我们按照每间隔 25px 的高度,利用线性渐变随机设置了一种颜色,最终,能够得到这么个效果:
![291663c69156debb71c8a9d685630d05.png](https://i-blog.csdnimg.cn/blog_migrate/933f406035c265545e281abe385b02c2.png)
此时,我们只需要再设置 background-clip: text
,配合透明文字颜色 color: transparent
,就可以实现单个 div 内,单列文字,每个字体的颜色都是不一样的:
div {
// ...
background: randomLinear(14);
background-clip: text;
color: transparent;
}
此时,效果如下:
![61da7a4acca444d7260a75f0cc32fc1d.png](https://i-blog.csdnimg.cn/blog_migrate/444226f47463063d142b6a7c8eac332e.png)
当然,文字颜色可以随机,那么文字本身也应该随机。这个不难,我们也可以借助 SASS 函数,编写一个随机字符的函数,通过元素的伪元素 content 进行设置。
那么此时,完整的代码可能是这样的:
<div></div>
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
div {
position: relative;
width: 25px;
height: 350px;
&::before {
content: randomChars(14);
position: absolute;
font-family: monospace;
background: randomLinear(14);
background-clip: text;
color: transparent;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
}
}
这样,每次 div 内的文字,都是从上面 SASS 函数中 $str
变量中随机取的:
![2c87af2bc3552716983c271a761afc42.png](https://i-blog.csdnimg.cn/blog_migrate/c3018587255283f59bba496b6e44439a.png)
接下来,我们需要实现文字的随机跳变,也很好做,我们需要在一开始,随机生成多个不同的 content,然后,借助 CSS 动画,进行切换。
div {
&::before {
content: randomChars(14);
--content1: "#{randomChars(14)}";
--content2: "#{randomChars(14)}";
--content3: "#{randomChars(14)}";
--content4: "#{randomChars(14)}";
animation: contentChange 1s infinite;
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}
这里,我们一次生成了 5 个 content,其中 4 个用 CSS 变量保存了起来,随后,在 CSS 动画中,利用提前生成好的 content,进行字符内容的替换,此时,整个效果如下:
![48104e0f7b5742ab5f613a2e79cf16d3.gif](https://i-blog.csdnimg.cn/blog_migrate/d7b5fb4f135041d6f0d040346ad28fae.gif)
随机内容有了,单个字体颜色不一样有了,就差颜色的随机跳变动画了,这个也非常好做,我们在多篇文章也提及过,利用 filter: hue-rotate()
可以快速实现内容的颜色切换。
div {
animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}
我们利用了 filter: hue-rotate()
加上了步骤动画(steps),成功的实现了颜色的跳变!效果如下:
![27ee2d4253cb4c5584b943f907aa2290.gif](https://i-blog.csdnimg.cn/blog_migrate/78886a6c74d974b0fd454a6b6aee4330.gif)
当然,我们最终要实现的是整个面随机颜色加上随机文字的跳变动画,只需要在上述的基础上,利用 SASS 函数,循环重复多列操作即可。基于上述所有内容的铺垫,我们最终的单个面下的动画效果代码如下:
<div class="g-container">
<div></div>
// ... 一个 32 个子 div
<div></div>
</div>
@use "sass:string";
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
$size: 25;
$count: 41;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
body,
html {
width: 100%;
height: 100%;
background: #000;
font-family: monospace;
}
.g-container {
position: relative;
width: 800px;
height: 800px;
display: flex;
animation: colorChange 1s steps(12) infinite;
div {
position: relative;
width: #{$size}px;
height: 800px;
flex-shrink: 0;
&::before {
position: absolute;
inset: 0;
text-align: center;
font-size: #{$size}px;
width: #{$size}px;
text-align: center;
line-height: #{$size}px;
color: transparent;
}
}
@for $i from 1 to $count {
div:nth-child(#{$i}) {
&::before {
content: randomChars(32);
--content1: "#{randomChars(32)}";
--content2: "#{randomChars(32)}";
--content3: "#{randomChars(32)}";
--content4: "#{randomChars(32)}";
animation: contentChange 1s infinite;
background: randomLinear(32);
background-clip: text;
}
}
}
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}
这样,我们就成功的实现了单个平面下的,颜色随机,文字随机,且不断变化的动画效果:
单个平面下的完整代码,你可以戳这里:CodePen Demo -- Single Panel Random Text(Demo 链接在下方参考资料)
实现立体效果
有了上面的立方体和单个平面的效果,要实现立体效果就不难了。我们尝试将两者结合起来。
改造原有的立方体结构,大致改成如下形式:
.perspective
.container
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
上面采用了 PUG 模板引擎来简化代码,编译后的效果如下:
<div class="perspective">
<div class="container">
<div class="g-panel">
<div></div>
// ... 32 个
<div></div>
<div class="g-panel">
<div></div>
// ... 32 个
<div></div>
<div class="g-panel">
<div></div>
// ... 32 个
<div></div>
<div class="g-panel">
<div></div>
// ... 32 个
<div></div>
<div class="g-panel">
<div></div>
// ... 32 个
<div></div>
</div>
</div>
这里,我们只需要实现 5 个面的立方体即可(前后左右以及上方)。
每个 .g-panel
,实现一个我们上面铺垫的单面文字跳变效果,这样,我们就能得到这么一个立体的 3D 立方体动画效果:
接下来,我们只需要稍加调试,通过控制 perspective
和 transform: translateZ()
控制视觉上的纵深,将画面的视角放置于整个立方体之中,即可得到这么个效果:
![72fada7c9803463e0169f0e2f7d1676d.png](https://i-blog.csdnimg.cn/blog_migrate/75754324daa6fab776a00f5ded7f0f03.png)
好,最后,我们模拟文章开头拉斯维加斯球的效果,让顶部的平面,向下运动,实现一种天花板往下掉的动画效果,最终,我们即可使用纯 CSS,大致模拟出整个效果:
由于 GIF 录制问题,实际效果会比 GIF 展示效果更为震撼。
使用 CSS 实现的完整的代码以及整个效果,你可以点击这里进行查看:CodePen Demo -- Las Vegas Sphere Cube Random Text(Demo 链接在下方参考资料)
最后
本文到此结束,希望对你有帮助 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
参考资料
[1]CodePen Demo -- 3D Cube: https://codepen.io/Chokcoco/pen/OJaLLpX
[2]CodePen Demo -- Single Panel Random Text: https://codepen.io/Chokcoco/pen/jOXJqVv?editors=1100
[3]CodePen Demo -- Las Vegas Sphere Cube Random Text: https://codepen.io/Chokcoco/pen/LYMMpPm?editors=1100
[4]Github -- iCSS: https://github.com/chokcoco/iCSS
关注宝哥
关注下方「前端开发博客」,回复 “加群”
加入我们一起学习,天天进步
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长、创作相关电子书
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~
如果觉得还不错,欢迎点赞、收藏、转发❤❤