单标签下多色块随机文字随机颜色动画

Chokcoco2023-10-31 10:10

我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。

在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：

其中一个核心点就是，我们利用了如下的代码，在一个 DIV 平面内，实现了单个平面下的随机文字随机颜色效果。

效果如下：

其中的 HTML 代码大致如下：

HTML 复制代码 
<div class="g-container">
  <div></div>
  // ... 一个 32 个子 div
  <div></div>
</div>

这里为了实现上述效果，其实是用了 32 列，每列是一个 DIV。

emmm，对于追求极致的我们，32 个 DIV 确实不太优雅了。那么，CSS 有没有什么方式，能够单个标签实现多列多格子，每个格子颜色不一致呢？像是这样：

答案当然是可以。本文，我们就将一起来探寻，使用 CSS 如何实现单标签下多色块，及单标签下随机文字随机颜色动画效果。

多重背景的威力

思考一下，单个 DIV，我们如何能够实现下述效果呢，譬如一个 DIV 内，有 36 种不同的颜色：

这里的核心，其实就是需要借助多重背景。

正常而言，我们的 DIV 只能有一个 background，设置一种颜色，像是这样：

HTML 复制代码 
<div></div>
CSS 复制代码 
div {
    width: 300px;
    height: 300px;
    background: #000;
}

效果如下：

但是，合理利用渐变语法的规则，利用多重渐变，我们就可以实现多重背景，我们改造一些上述代码：

CSS 复制代码 
div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: 
        linear-gradient(90deg, #000, #000),
        linear-gradient(90deg, #f00, #f00);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 150px 0;
    background-repeat: no-repeat;
}

利用多重背景的能力，我们就得到了黑色和红色两个色块：

我们还可以继续拆分，1 拆 4：

CSS 复制代码 
div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: 
        linear-gradient(90deg, #000, #000),
        linear-gradient(90deg, #0f0, #0f0),
        linear-gradient(90deg, #00f, #00f),
        linear-gradient(90deg, #f00, #f00);
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: 0 0, 150px 0, 0 150px, 150px 150px;
    background-repeat: no-repeat;
}

效果如下：

它其实是这么个意思，看下面这张图就能很好的理解：

这里我们只标识出了黑色色块和红色色块，另外两个色块的原理也是一样的。

理解了这一点之后，我们要实现如下这个图形就非常轻松了：

当然，这里有个问题，我们手动去写那么多重渐变的代码，工作量是非常之大的，因此，我们可以尝试封装一个 SCSS 函数或者 mixin 帮助我们减轻代码量。

CSS 复制代码 
@use "sass:string";


@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@mixin randomLinear($rows: 6, $cols: 8) {
  $bg: null;
  $pos: null;

  $px: 100% / ($cols - 1);
  $py: 100% / ($rows - 1);

  @for $i from 0 through $rows - 1 {
    @for $j from 0 through $cols - 1 {
      @if ($bg) {
        $bg: $bg + string.unquote(",");  
        $pos: $pos + string.unquote(",");  
      }
      $color: randomColor();
      $bg: $bg + linear-gradient(to right, $color, $color);
      $pos: $pos + string.unquote("#{$j * $px} #{$i * $py}");
    }
  }
  background: {
    image: $bg;
    size: (100% / $cols) (100% / $rows);
    repeat: no-repeat;
    position: $pos;
  }
}

@function randomColor() {
    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}

div {
    @include randomLinear(6, 6);
}

这里，我们借助 SCSS 封装了一个 randomLinear 的 mixin，它接收两个参数，分别表示行数和列数，基于上面的 background 拆分，实现了多重渐变，如此一来，我们就能在单个 DIV 下得到这样一个随机的多色块格子图：

审查元素，SCSS 编译后的 CSS 代码其实就是这样的：

好，在此基础上要实现颜色的随机变化也非常简单，我们只需要配合 filter: hue-rotate() 变换即可。

代码如下：

CSS 复制代码 
div {
    @include randomLinear(6, 6);
    animation: colorChange 1s infinite steps(10);
}

@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

这里巧妙的利用了 steps(10)，让整个图形在 1s 内进行 10 次 hue-rotate() 变化。

这里的核心点有两个：

  1. 利用 filter: hue-rotate(360deg) 滤镜，能够实现颜色的切换
  2. 利用 steps(10) 实现了逐帧动画而不是连续的补间动画

如此一来，我们就能得到如下效果，实现了单个标签内多个不同色块，并且可以实现动画变换：

结合 background-clip: text 实现文字效果

接下来，我们需要实现单个标签下的随机文字、随机颜色的动画效果。也就是下图右边的效果：

有了上面的铺垫，其实整个效果就剩下两步：

  1. 利用 background-clip: text 实现从色块到文字的裁剪变化
  2. 借助 SCSS 函数及 CSS 变量，实现随机文字的变化

首先，与 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中一样，借助 SCSS 函数，编写一个随机字符的函数，通过元素的伪元素 content 进行设置，并且，我们把背景色，也设置给元素的伪元素：

CSS 复制代码 
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);

@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  {
    width: 300px;
    height: 300px;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    font-family: monospace;
    
    &::before {
        content: randomChars(36);
        position: absolute;
        inset: 0;
        @include randomLinear(6, 6);
        color: transparent;
    }
}

这里，有几个细节点再简单讲解一下：

  1. 为了让每个字符对齐，我们使用了 font-family: monospace 等宽字符，并且利用 font-size 和 letter-spacing 确保一行只能放下 6 个字符
  2. 利用 randomChars SCSS 函数，随机从我们定义的 $str SCSS 字符串变量中取 36 个随机字符
  3. @include randomLinear(6, 6) 就是上面铺垫的随机渐变背景

如此一来，我们就能得到这么一个效果：

此时，我们只需要再给元素的伪元素设置一个 background-clip: text 配合文字颜色 transparent，即可得到色块裁剪到只剩下文字部分的效果：

CSS 复制代码 
div  {
    // ...
    
    &::before {
        //...
        color: transparent;
        background-clip: text;
    }
}

效果如下：

好，那如何再让整个文字随机变换起来呢？我们只需提前生成多个不同的随机文字 content，然后进行动画切换即可，像是这样：

CSS 复制代码 
div  {
    // ...
    
    &::before {
        content: randomChars(36);
        --content1: "#{randomChars(36)}";
        --content2: "#{randomChars(36)}";
         --content3: "#{randomChars(36)}";
        --content4: "#{randomChars(36)}";
        --content5: "#{randomChars(36)}";
        --content6: "#{randomChars(36)}";
        --content7: "#{randomChars(36)}";
        --content8: "#{randomChars(36)}";
        --content9: "#{randomChars(36)}";
        color: transparent;
        background-clip: text;
        animation: contentChange 1.5s infinite linear;
    }
}
@keyframes contentChange {
    10% {
        content: var(--content1);
    }
    20% {
        content: var(--content2);
    }
    30% {
        content: var(--content3);
    }
    40% {
        content: var(--content4);
    }
    50% {
        content: var(--content5);
    }
    60% {
        content: var(--content6);
    }
    70% {
        content: var(--content7);
    }
    80% {
        content: var(--content8);
    }
    90% {
        content: var(--content9);
    }
}

这样，文字也能随机动起来了（当然，此处其实是伪随机）：

最后，把上面的 hue-rotate 动画重新打开，就能让文字颜色也随机变换！

至此，完整的代码如下：

HTML 复制代码 
<div></div>
CSS 复制代码 
@use "sass:string";
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu+Mono&display=swap');

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@mixin randomLinear($rows: 6, $cols: 8) {
  $bg: null;
  $pos: null;

  $px: 100% / ($cols - 1);
  $py: 100% / ($rows - 1);

  @for $i from 0 through $rows - 1 {
    @for $j from 0 through $cols - 1 {
      @if ($bg) {
        $bg: $bg + string.unquote(",");  
        $pos: $pos + string.unquote(",");  
      }
      $color: randomColor();
      $bg: $bg + linear-gradient(to right, $color, $color);
      $pos: $pos + string.unquote("#{$j * $px} #{$i * $py}");
    }
  }
  background: {
    image: $bg;
    size: (100% / $cols) (100% / $rows);
    repeat: no-repeat;
    position: $pos;
  }
}

@function randomColor() {
    @return rgb(randomNum(205, 50), 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 {
    width: 300px;
    height: 300px;
    color: #fff;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    animation: colorChange 1.5s infinite steps(10);
    
    &::before {
        --content1: "#{randomChars(36)}";
        --content2: "#{randomChars(36)}";
        --content3: "#{randomChars(36)}";
        --content4: "#{randomChars(36)}";
        --content5: "#{randomChars(36)}";
        --content6: "#{randomChars(36)}";
        --content7: "#{randomChars(36)}";
        --content8: "#{randomChars(36)}";
        --content9: "#{randomChars(36)}";
        content: randomChars(36);
        position: absolute;
        inset: 0;
        color: transparent;
        background-clip: text;
        animation: contentChange 1.5s infinite linear;
    }
}

@keyframes colorChange {
    100% {
        filter: hue-rotate(340deg);
    }
}
@keyframes contentChange {
    10% {
        content: var(--content1);
    }
    20% {
        content: var(--content2);
    }
    30% {
        content: var(--content3);
    }
    40% {
        content: var(--content4);
    }
    50% {
        content: var(--content5);
    }
    60% {
        content: var(--content6);
    }
    70% {
        content: var(--content7);
    }
    80% {
        content: var(--content8);
    }
    90% {
        content: var(--content9);
    }
}

效果如下：

完整的代码，你可以戳这里：CodePen Demo -- Single Div Random Text And Random Color

多色块的其他解决方案？

我们继续扩展延伸一下，本效果的核心还是如何在一个 DIV 下实现多种不同的颜色。

那么，除了上述的技巧，还有其他方式能够在一个 DIV 下实现多种不同颜色吗？

这里，我们还可以利用内联元素的 background 展示特性来实现。

什么意思呢？其实 background 的展示，在 块级元素状态 和 内联元素状态 下的展示规则是不一样的。

表现为 display: inline 内联元素的 background 展现形式与 display: block 块级元素（或者 inline-block、flex、grid）不一致。

简单看个例子：

HTML 复制代码 
<p>Lorem .....</p><a>Lorem .....</a>

这里需要注意，<p> 元素是块级元素 ，而 <a> 是内联元素。

我们给它们统一添加上一个从绿色到蓝色的渐变背景色：

CSS 复制代码 
p, a {
  background: linear-gradient(90deg, blue, green);
}

看看效果：

什么意思呢？区别很明显：

  1. 块级元素的背景整体是一个渐变整体
  2. 内联元素的背景效果是以行为单位进行串连的，每一行都是会有不一样的效果，每行连起来整体组成一个完整的背景效果

基于这一点，我们同样可以实现单个 DIV 下的多重背景。

举个例子：

HTML 复制代码 
<div class="g-container">
    <span>ABCDEFGHIJKL</span>
</div>
CSS 复制代码 
div {
    width: 300px;
}
span{
    color: #000;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    background: #fc0;
}

此时，我们只设置了一个背景 background: #fc0，效果如下：

基于上面说的技巧，我们改造一下 background: #fc0，拆分成多段渐变背景：

CSS 复制代码 
span{
    //...
    background: linear-gradient(
        90deg, 
        #fc0 0 25%, 
        #0f0 0 50%, 
        #00f 0 75%, 
        #f00 0 100%
    );
}

这里，我们每隔 25%，设置了一段不同的颜色，如此一来，整个背景色就变成了 4 块：

基于这个技巧，我们同样可以封装一个 SCSS 函数，用于在单个 DIV 下生成多段色块。代码如下：

CSS 复制代码 
@use "sass:string";
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu+Mono&display=swap');

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);


@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
@function randomColor() {
    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}
@function randomLinear($count) {
    $value: '';
    
    @for $i from 0 through ($count - 1) {
        $j: $i - 1;
        $value: $value + randomColor() + string.unquote(" #{$j * 50}px #{$i * 50}px,");
    }
    
    @return linear-gradient(90deg, string.unquote(#{$value}) randomColor() 0 100%);
}

span {
    background: randomLinear(36, 50);
}

上面的代码，我们实现了一个 randomLinear($count, $width) 的 SCSS 函数，其中：

  1. $count 表示需要的色块个数
  2. $width 表示每个色块的宽度

如此一来，在一个 300px x 300px 的内联元素内，我们同样可以实现多个不同的随机颜色。利用这个技巧，一样可以实现单个平面下的随机文字随机颜色效果：

剩余的技巧都是相同的，这里就不再赘述，此技巧的完整代码，你可以戳这里：CodePen Demo -- Single Div Random Text And Random Color

最后

本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

相关推荐
百万蹄蹄向前冲35 分钟前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda2 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡2 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习（三）
前端
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库