单标签下多色块随机文字随机颜色动画
发布网友
发布时间：1天前
共1个回答
热心网友
时间：3分钟前
我的小册《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以点击链接查看。
利用 CSS 实现拉斯维加斯球数字动画的核心是，利用单个 DIV 平面内的随机文字随机颜色效果，实现了一个非常 Amazing 的动画效果。
为了实现这个效果，我们使用了 32 列，每列是一个 DIV。但这确实不太优雅，是否可以使用 CSS 在单个标签实现多列多格子，每个格子颜色不一致？答案是肯定的。
通过使用多重背景，我们可以实现单个 DIV 内有 36 种不同的颜色。原本只能设置一种颜色的 DIV，通过多重渐变，可以实现多重背景。
我们先设置一个黑色和红色的色块，然后继续拆分，实现一个 36 种颜色的多色块格子图。为了减轻代码量，我们可以使用 SCSS 函数或 mixin。
通过封装一个 randomLinear 的 mixin，我们可以基于上面的 background 拆分，实现多重渐变，这样就能在单个 DIV 下得到随机的多色块格子图。
要实现颜色的随机变化，我们只需配合 filter: hue-rotate() 变换。代码中巧妙地利用了 steps(10)，让整个图形在 1s 内进行 10 次 hue-rotate() 变化。
理解了多重背景的威力后，我们就可以实现单个标签内多个不同色块，并且可以实现动画变换。
结合 background-clip: text，我们还能实现文字效果。编写一个随机字符的函数，通过元素的伪元素 content 进行设置，并且，我们把背景色也设置给元素的伪元素。
给元素的伪元素设置一个 background-clip: text 配合文字颜色 transparent，即可得到色块裁剪到只剩下文字部分的效果。
为了让整个文字随机变换，我们提前生成多个不同的随机文字 content，然后进行动画切换。这使得文字也能随机动起来。
最后，结合 hue-rotate 动画，文字颜色也能随机变换。完整的代码可以在 CodePen Demo 中查看。
除了上述技巧，我们还可以利用内联元素的 background 展示特性来实现单个 DIV 下的多重背景。通过设置 display: inline，我们可以在内联元素中实现多个不同的随机颜色。
基于这个技巧，我们可以封装一个 SCSS 函数，用于在单个 DIV 下生成多段色块。这样，在一个300px x 300px 的内联元素内，我们同样可以实现多个不同的随机颜色。
最后，希望本文能够帮助到你，更多 CSS 技术文章可以关注我的 Github -- iCSS，持续更新，欢迎订阅收藏。
