近大家刷抖音，是否有刷到拉斯維加斯的新地標 「Sphere」：

場館內部的視覺效果非常驚人，其中一個效果讓我虎軀一震：

我的第一想法就是，這個看起來用 CSS 也可以實現嘛？還有 CSS 不能實現的？

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

拆解動畫效果

其實，上述的動畫效果，本質就是一個 3D 立方體。

同時，3D 立方體上每個面存在顏色不一樣的文字，文字和顏色都在隨機變化。

也就是說，我們需要實現一個 3D 立方體：

同時，我們還需要實現這樣一個動畫效果 -- 文字和顏色都在隨機變化的平面效果：

兩者組合一下，再挪動 3D 元素的景深距離，就能實現我們想要的效果！

好，下面我們一個一個實現。

實現一個 3D 立方體

實現一個 3D 立方體，相對另外一個文字和顏色都在隨機變化的平面效果而言，屬于非常非常簡單的一步了。

我們在非常多篇文章中也講過具體的實現方式：

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

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

這樣一個圖形，利用 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;
}

簡單解釋一下：

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

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

技巧就是：先旋轉，再位移。

這里給出一個俯視效果圖：

以上述 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);
        }
}

效果如下：

此時，可能會覺得圖片太太太大了，此時，我們可以通過給中間層 .container 設置一個恰當的 translateZ 進行視覺大小上的調節。

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

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

當然，對于我們這個效果，我們 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 個面的立方體元素。

示意效果如下：

實現文字動畫效果

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

效果大致如下：

此時，如果我們再利用線性漸變，給每個字符的對應空間（也就 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 的高度，利用線性漸變隨機設置了一種顏色，最終，能夠得到這么個效果：

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

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

此時，效果如下：

當然，文字顏色可以隨機，那么文字本身也應該隨機。這個不難，我們也可以借助 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 變量中隨機取的：

接下來，我們需要實現文字的隨機跳變，也很好做，我們需要在一開始，隨機生成多個不同的 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，進行字符內容的替換，此時，整個效果如下：

隨機內容有了，單個字體顏色不一樣有了，就差顏色的隨機跳變動畫了，這個也非常好做，我們在多篇文章也提及過，利用 filter: hue-rotate() 可以快速實現內容的顏色切換。

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

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

當然，我們最終要實現的是整個面隨機顏色加上隨機文字的跳變動畫，只需要在上述的基礎上，利用 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);
    }
}

這樣，我們就成功的實現了單個平面下的，顏色隨機，文字隨機，且不斷變化的動畫效果：

實現立體效果

有了上面的立方體和單個平面的效果，要實現立體效果就不難了。我們嘗試將兩者結合起來。

改造原有的立方體結構，大致改成如下形式：

.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() 控制視覺上的縱深，將畫面的視角放置于整個立方體之中，即可得到這么個效果：

好，最后，我們模擬文章開頭拉斯維加斯球的效果，讓頂部的平面，向下運動，實現一種天花板往下掉的動畫效果，最終，我們即可使用純 CSS，大致模擬出整個效果：

由于 GIF 錄制問題，實際效果會比 GIF 展示效果更為震撼。

、關于css3的transition屬性：

transition:翻譯為“過渡”，過渡是一個持續性的動作，因此必須定義一個持續時間。

transition屬性：

1.transition-property屬性：指定CSS屬性的過渡效果，常用于鼠標懸停在一個元素上時指定屬性的變化效果；

none：沒有屬性會獲得過渡效果。

all：所有屬性都會獲得過渡效果，此值為默認值。

<property>：指定屬性獲得過渡效果，多個屬性用逗號分隔，如 width,color

2.transition-duration屬性：規定完成過渡效果需要花費的時間（以秒或毫秒計，如： 0.5s），如需要過渡效果，必須指定一個過渡時間，否則過渡效果是不會生效的；

3.transition-timing-function屬性：指定切換效果的速度，此屬性允許一個過渡效果，以改變其持續時間的速度；

linear 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease （默認值） 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

4.transition-delay 屬性：指定何時將開始切換效果，延遲一段時間后觸發過渡（以秒或毫秒計，如： 0.5s），默認為0s。

除了transition-duration屬性外，其他都有默認值，如果不需要改變默認值可以不指定，只配置transition-duration屬性即可：

transition:0.5s 等價于 transition: all 0.5s ease 0s;

例：針對的是一個標簽元素

div{
   width: 100px;
   height: 100px;
   background-color: wheat;
 
   //當div的width屬性發生變化時，應用此過渡效果
   transition: width 0.5s ease 0s; 
}
//鼠標指向時div的width屬性發生變化
div:hover{
   width:300px;
}
 
<div></div>

二、關于css3的transform屬性：

transform 屬性：應用于元素的2D或3D轉換，這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

translate(x,y)、translateX(x)、translateY(y)：定義2D轉換，x.y單位一般取px，transform：translateX(100px):元素相對原本位置之右100px

div{
  //div相對原來位置在右下100px處
  transform:translate(100px,100px)
}

scale(x,y)、scaleX(x)、scaleY(y)，在2D上旋轉綻放

rotate(x,y)、rotateX(x)、rotateY(y)，在2D上旋轉

skew(x,y)、skewX(x)、skewY(y)，在2D上傾斜

三、關于Vue的過渡動畫

開啟vue過渡動畫，只需要將需要開啟的標簽放到<transition>中，同時標簽使用v-if控制顯示和隱藏。

<input type="button" value="點擊" @click="isShow=!isShow" >
<transition>
    <p v-show="isShow">{{msg}}</p>
</transition>

vue的過渡進程圖：針對的是類名

進入前、進入后、離開前、離開后，四個狀態是一個點，而v-enter-active v-leave-active是一個持續的狀態，因此，active中需要標明持續的時間，

v-enter、v-enter-to、v-leave、v-leave-to：需要定義四個狀態點的屬性：

.v-enter-active,
.v-leave-active {
   //過渡持續時間0.6秒
   transition:  0.6s;
}
 
.v-enter,
.v-leave-to {
     //進入前、離開后，完全透明
     opacity: 0;
     //進入前，離開后，元素相對位置在下邊100px處
     transform:translateY(100px);
}
 
.v-enter-to,
.v-leave {
   //進入后、離開前，完全不透明
    opacity: 1;
}

四、自定義前綴

當在<transition name="fade">指定了name屬性，就可以使用前綴 .fade-enter 這樣。

五、使用第三方animate.css來實現動畫

1.引入animate.css

<link ref="stylesheet" href="animate.css">

2.在<transition>中增加enter-active-class和leave-active-class，類名可以通過官方網站復制

官方網站：https: //animate.style/

<input type="button" value="點擊" @click="isShow=!isShow" >
<transition  enter-active-class="animate__bounceIn" leave-active-lass="animate__bounceOut">
    <p v-show="isShow" id="p">{{msg}}</p>
</transition>

六、列表動畫演示