使用CSS還原拉斯維加斯球數(shù)字動(dòng)畫效果

發(fā)布時(shí)間：2023-10-20 14:24:55 作者：Chokcoco

最近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」，場(chǎng)館內(nèi)部的視覺效果非常驚人，我的第一想法就是，這個(gè)看起來用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？本文，就將嘗試使用 CSS，大致還原這個(gè)效果，感興趣的同學(xué)可以參考閱讀

最近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」：

場(chǎng)館內(nèi)部的視覺效果非常驚人，其中一個(gè)效果讓我虎軀一震：

我的第一想法就是，這個(gè)看起來用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？

本文，就將嘗試使用 CSS，大致還原這個(gè)效果。

拆解動(dòng)畫效果

其實(shí)，上述的動(dòng)畫效果，本質(zhì)就是一個(gè) 3D 立方體。

同時(shí)，3D 立方體上每個(gè)面存在顏色不一樣的文字，文字和顏色都在隨機(jī)變化。

也就是說，我們需要實(shí)現(xiàn)一個(gè) 3D 立方體：

同時(shí)，我們還需要實(shí)現(xiàn)這樣一個(gè)動(dòng)畫效果 -- 文字和顏色都在隨機(jī)變化的平面效果：

兩者組合一下，再挪動(dòng) 3D 元素的景深距離，就能實(shí)現(xiàn)我們想要的效果！

好，下面我們一個(gè)一個(gè)實(shí)現(xiàn)。

實(shí)現(xiàn)一個(gè) 3D 立方體

實(shí)現(xiàn)一個(gè) 3D 立方體，相對(duì)另外一個(gè)文字和顏色都在隨機(jī)變化的平面效果而言，屬于非常非常簡(jiǎn)單的一步了。

我們?cè)诜浅６嗥恼轮幸仓v過具體的實(shí)現(xiàn)方式：

最常見的 3D 圖形，莫過于一個(gè) 3D 立方體。

如果沒有上下兩個(gè)面，只是一個(gè) 4 個(gè)面的圖形，大概是這樣：

這樣一個(gè)圖形，利用 CSS 3D，如何快速實(shí)現(xiàn)呢？

首先，構(gòu)造這么一個(gè)結(jié)構(gòu)：

<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 個(gè)面，就是最內(nèi)層的 4 個(gè) .img，首先，需要給兩個(gè)父容器，設(shè)置 3D 的屬性：

.perspective {
  perspective: 3000px;
}
.container {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
}

簡(jiǎn)單解釋一下：

perspective 可以作用于元素的后代，設(shè)置在最上層即可；
transform-style: preserve-3d 設(shè)置給最終需要 3D 空間的元素的父容器之上，由于最終是 4 個(gè) .img 需要 3D 空間，因此設(shè)置給 .container 即可。

接下來，就是最為核心的，如何設(shè)置 4 個(gè) .img 元素的 3D 變換，使之形成 3D 立方體。

技巧就是：先旋轉(zhuǎn)，再位移。

這里給出一個(gè)俯視效果圖：

以上述 Demo 中的正方體為例子，class 為 .img 的 div 塊的高寬為 400px*400px。那么要利用 4 個(gè) 這樣的 div 拼接成一個(gè)正方體，需要分別將 4 個(gè) div 繞 Y 軸旋轉(zhuǎn) [90°, 180°, 270°, 360°]，再 translateY(200px) 。

值得注意的是，一定是先旋轉(zhuǎn)角度，再偏移距離，這個(gè)順序很重要。

代碼如下：

.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);
        }
}

效果如下：

此時(shí)，可能會(huì)覺得圖片太太太大了，此時(shí)，我們可以通過給中間層 .container 設(shè)置一個(gè)恰當(dāng)?shù)?nbsp;translateZ 進(jìn)行視覺大小上的調(diào)節(jié)。

.container {
    transform: translateZ(-3000px);
}

這樣，就能得到恰當(dāng)大小的立方體元素效果：

完整的代碼，你可以戳這里：CodePen Demo -- 3D Cube

當(dāng)然，對(duì)于我們這個(gè)效果，我們 5 要五個(gè)面（前后左右與上方即可），因此，我們基于上述的基礎(chǔ)知識(shí)鋪墊，重新實(shí)現(xiàn)一個(gè)我們需要的框架結(jié)構(gòu)：

<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>

并且，我們希望我們的圖形是一個(gè)立方體，只需要稍微改造長(zhǎng)寬和 translateZ() 的即可。這樣，我們就能得到一個(gè)前后左右與上方 5 個(gè)面的立方體元素。

示意效果如下：

實(shí)現(xiàn)文字動(dòng)畫效果

OK，立方體我們先放在一邊。

接下來，我們嘗試來實(shí)現(xiàn)這個(gè)效果：

這個(gè)效果如果一個(gè)文字用一個(gè) DIV 承載實(shí)現(xiàn)，那是非常容易的，但是這樣勢(shì)必會(huì)造成元素過多，再設(shè)置動(dòng)畫效果，則會(huì)導(dǎo)致頁(yè)面太為卡頓。

所以，我們需要另辟蹊徑。這里，我們可以使用多層漸變配合 background-clip: text。

首先，我們利用等寬字體，隨機(jī)實(shí)現(xiàn)一列文字：

<div>ABCDEFGHIJKLMN</div>

div {
    font-family: monospace;
    text-align: center;
    font-size: 25px;
    width: 25px;
    line-height: 25px;
    color: #fff;
}

效果大致如下：

此時(shí)，如果我們?cè)倮镁€性漸變，給每個(gè)字符的對(duì)應(yīng)空間（也就 25px x 25px），設(shè)置上不同的顏色，大概是這樣：

@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) 是一個(gè) SASS 函數(shù)，參數(shù) 14 表示生成 14 層線性漸變，每一個(gè)文字區(qū)域的顏色都是隨機(jī)的，經(jīng)過編譯后的其中一種結(jié)果如下：

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 的高度，利用線性漸變隨機(jī)設(shè)置了一種顏色，最終，能夠得到這么個(gè)效果：

此時(shí)，我們只需要再設(shè)置 background-clip: text，配合透明文字顏色 color: transparent，就可以實(shí)現(xiàn)單個(gè) div 內(nèi)，單列文字，每個(gè)字體的顏色都是不一樣的：

div {
    // ...
    background: randomLinear(14);
    background-clip: text;
    color: transparent;
}

此時(shí)，效果如下：

當(dāng)然，文字顏色可以隨機(jī)，那么文字本身也應(yīng)該隨機(jī)。這個(gè)不難，我們也可以借助 SASS 函數(shù)，編寫一個(gè)隨機(jī)字符的函數(shù)，通過元素的偽元素 content 進(jìn)行設(shè)置。

那么此時(shí)，完整的代碼可能是這樣的：

<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 內(nèi)的文字，都是從上面 SASS 函數(shù)中 $str 變量中隨機(jī)取的：

接下來，我們需要實(shí)現(xiàn)文字的隨機(jī)跳變，也很好做，我們需要在一開始，隨機(jī)生成多個(gè)不同的 content，然后，借助 CSS 動(dòng)畫，進(jìn)行切換。

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 個(gè) content，其中 4 個(gè)用 CSS 變量保存了起來，隨后，在 CSS 動(dòng)畫中，利用提前生成好的 content，進(jìn)行字符內(nèi)容的替換，此時(shí)，整個(gè)效果如下：

隨機(jī)內(nèi)容有了，單個(gè)字體顏色不一樣有了，就差顏色的隨機(jī)跳變動(dòng)畫了，這個(gè)也非常好做，我們?cè)诙嗥恼乱蔡峒斑^，利用 filter: hue-rotate() 可以快速實(shí)現(xiàn)內(nèi)容的顏色切換。

div {
    animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

我們利用了 filter: hue-rotate() 加上了步驟動(dòng)畫（steps），成功的實(shí)現(xiàn)了顏色的跳變！效果如下：

當(dāng)然，我們最終要實(shí)現(xiàn)的是整個(gè)面隨機(jī)顏色加上隨機(jī)文字的跳變動(dòng)畫，只需要在上述的基礎(chǔ)上，利用 SASS 函數(shù)，循環(huán)重復(fù)多列操作即可?；谏鲜鏊袃?nèi)容的鋪墊，我們最終的單個(gè)面下的動(dòng)畫效果代碼如下：

<div class="g-container">
  <div></div>
  // ... 一個(gè) 32 個(gè)子 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);
    }
}

這樣，我們就成功的實(shí)現(xiàn)了單個(gè)平面下的，顏色隨機(jī)，文字隨機(jī)，且不斷變化的動(dòng)畫效果：

單個(gè)平面下的完整代碼，你可以戳這里：CodePen Demo -- Single Panel Random Text

實(shí)現(xiàn)立體效果

有了上面的立方體和單個(gè)平面的效果，要實(shí)現(xiàn)立體效果就不難了。我們嘗試將兩者結(jié)合起來。

改造原有的立方體結(jié)構(gòu)，大致改成如下形式：

.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 模板引擎來簡(jiǎn)化代碼，編譯后的效果如下：

<div class="perspective">
  <div class="container">
    <div class="g-panel">
      <div></div>
      // ... 32 個(gè)
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 個(gè)
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 個(gè)
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 個(gè)
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 個(gè)
      <div></div>
  </div>
</div>

這里，我們只需要實(shí)現(xiàn) 5 個(gè)面的立方體即可（前后左右以及上方）。

每個(gè) .g-panel，實(shí)現(xiàn)一個(gè)我們上面鋪墊的單面文字跳變效果，這樣，我們就能得到這么一個(gè)立體的 3D 立方體動(dòng)畫效果：