奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能製作出多驚豔的動畫？

ChokCoco發表於2021-08-24
CSS3D動畫

本文將從比較多的方面詳細闡述如何利用 CSS 3D 的特性，實現各類有趣、酷炫的動畫效果。認真讀完，你將會收穫到：

  • 瞭解 CSS 3D 的各種用途
  • 激發你新的靈感，感受動畫之美
  • 對於提升 CSS 動畫製作水平會有所幫助

CSS 3D 基礎知識

本文預設讀者掌握一定的 CSS 3D 知識，能夠繪製初步的 3D 動畫效果。當然這裡會再簡單過一下 CSS 3D 的基礎知識。

使用 transform-style 啟用 3D 模式

要利用 CSS3 實現 3D 的效果，最主要的就是藉助 transform-style 屬性。transform-style 只有兩個值可以選擇：

// 語法：
transform-style: flat|preserve-3d;
 
transform-style: flat; // 預設，子元素將不保留其 3D 位置
transform-style: preserve-3d; // 子元素將保留其 3D 位置。

當我們指定一個容器的 transform-style 的屬性值為 preserve-3d 時，容器的後代元素便會具有 3D 效果，這樣說有點抽象，也就是當前父容器設定了 preserve-3d 值後，它的子元素就可以相對於父元素所在的平面，進行 3D 變形操作。

利用 perspective & perspective-origin 設定 3D視距，實現透視/景深效果

perspective 為一個元素設定三維透視的距離，僅作用於元素的後代，而不是其元素本身。

簡單來說，當元素沒有設定 perspective 時，也就是當 perspective:none/0 時所有後代元素被壓縮在同一個二維平面上，不存在景深的效果。

而如果設定 perspective 後，將會看到三維的效果。

// 語法
perspective: number|none;

// 語法
perspective-origin: x-axis y-axis;
// x-axis : 定義該檢視在 x 軸上的位置。預設值：50%
// y-axis : 定義該檢視在 y 軸上的位置。預設值：50%

而 perspective-origin 表示 3D 元素透視視角的基點位置，預設的透視視角中心在容器是 perspective 所在的元素，而不是他的後代元素的中點，也就是 perspective-origin: 50% 50%。

通過繪製 Webpack Logo 熟悉 CSS 3D

對於初次接觸 CSS 3D 的同學而言，可以通過繪製正方體快速熟悉語法，瞭解規則。

而 Webpack 的 Logo，正是由 2 個 立方體組成：

以其中一個正方體而言，實現它其實非常容易：

  1. 一個正方體由 6 個面組成，所以首先設定一個父元素 div，然後這個 div 再包含 6 個子 div，同時，父元素設定 transform-style: preserve-3d；
  2. 6 個子元素，依次首先旋轉不同角度，再通過 translateZ 位移正方體長度的一半距離即可
  3. 父元素可以通過 transform 和 perspective 調整視覺角度

以一個正方體為例子，簡單的虛擬碼如下：

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="front"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="left"></li>
</ul>

.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50px 50px;
    transform: rotateX(-33.5deg) rotateY(45deg);

    li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249);
      border: 1px solid #fff;
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
    .left {
      transform: rotateY(-90deg) translateZ(50px);
    }
    .right {
      transform: rotateY(90deg) translateZ(50px);
    }
}

疊加兩個，調整顏色和透明度，我們可以非常輕鬆的實現 Webpack 的 LOGO：

當然，這裡的 LOGO 為了保證每條線條視覺上的一致性，其實是沒有設定景深效果 perspective 的，我們可以嘗試給頂層父容器新增一下如下程式碼，通過 transform 和 perspective 調整視覺角度，設定景深效果：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

就可以得到真正的 3D 效果，感受很不一樣：

完整的程式碼，你可以戳這裡：CodePen Demo -- Webpack LOGO

OK，熱身完畢，接下來，讓我們插上想象的翅膀，走進 CSS 3D 的世界。

實現文字的 3D 效果

首先，看看一些有意思的 CSS 3D 文字特效。

要實現文字的 3D 效果，看起來是立體的，通常的方式就是疊加多層。

下面有一些實現一個文字的 3D 效果的方式。

假設我們有如下結構：

<div class="g-container">
    <p>Lorem ipsum</p>
</div>

如果什麼都不加，文字的展示可能是這樣的：

我們可以通過疊加陰影多層，營造 3D 的感覺，主要是合理控制陰影的距離及顏色，核心 CSS 程式碼如下：

p {
    text-shadow: 
        4px 4px 0 rgba(0, 0, 0, .8),
        8px 8px 0 rgba(0, 0, 0, .6),
        12px 12px 0 rgba(0, 0, 0, .4),
        16px 16px 0 rgba(0, 0, 0, .2),
        20px 20px 0 rgba(0, 0, 0, .05);
}

這樣，就有了基礎的 3D 視覺效果。

3D 氖燈文字效果

基於此，我們可以實現一些 3D 文字效果，來看一個 3D 氖燈文字效果，核心就是：

  • 利用 text-shadow 疊加多層文字陰影
  • 利用 animation 動態改變陰影顏色
<div class="container">
	<p class="a">CSS 3D</p>
	<p class="b">NEON</p>
	<p class="a">EFFECT</p>
</div>

核心 CSS 程式碼：

.container {
	transform: rotateX(25deg) rotateY(-25deg);
}
.a {
	color: #88e;
	text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
		0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
		0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
	animation: pulsea 300ms ease infinite alternate;
}
.b {
	color: #f99;
	text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
		0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
		0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
	animation: pulseb 300ms ease infinite alternate;
}
@keyframes pulsea {
	// ... 陰影顏色變化
}
@keyframes pulseb {
	// ... 陰影顏色變化
}

可以得到如下效果：

4

完整的程式碼，你可以猛擊這裡 CSS 靈感 -- 使用陰影實現文字的 3D 氖燈效果

利用 CSS 3D 配合 translateZ 實現真正的文字 3D 效果

當然，上述第一種技巧其實沒有運用 CSS 3D。下面我們使用 CSS 3D 配合 translateZ 再進一步。

假設有如下結構：

<div>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>  
</div>

我們通過給父元素 div 設定 transform-style: preserve-3d，給每個 <h1> 設定不同的 translateZ() 來達到文字的 3D 效果:

div {
    transform-style: preserve-3d;
}
h1:nth-child(2) {
    transform: translateZ(5px);
}
h1:nth-child(3) {
    transform: translateZ(10px);
}
h1:nth-child(4) {
    transform: translateZ(15px);
}
h1:nth-child(5) {
    transform: translateZ(20px);
}
h1:nth-child(6) {
    transform: translateZ(25px);
}
h1:nth-child(7) {
    transform: translateZ(30px);
}
h1:nth-child(8) {
    transform: translateZ(35px);
}
h1:nth-child(9) {
    transform: translateZ(40px);
}
h1:nth-child(10) {
    transform: translateZ(45px);
}

當然，輔助一些旋轉，色彩變化，就可以得到更純粹一些 3D 文字效果：

完整的程式碼，你可以猛擊這裡 CSS 靈感 -- 3D 光影變換文字效果

利用距離、角度及光影構建不一樣的 3D 效果

還有一種很有意思的技巧，製作的過程需要比較多的除錯。

合理的利用距離、角度及光影構建出不一樣的 3D 效果。看看下面這個例子，只是簡單是設定了三層字元，讓它們在 Z 軸上相距一定的距離。

簡單的虛擬碼如下：

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
	perspective: 2000px;
	transform-style: preserve-3d;
	animation: fade $duration infinite;
}
span {
	transform-style: preserve-3d;
	transform: rotateY(25deg);
	animation: rotate $duration infinite ease-in;
	
	&:after, &:before {
		content: attr(class);
		color: $gold;
		z-index: -1;
		animation: shadow $duration infinite;
	}
	&:after{
		transform: translateZ(-16px);
	}
	&:before {
		transform: translateZ(-8px);
	}
}
@keyframes fade {
	// 透明度變化
}
@keyframes rotate {
	// 字型旋轉
}
@keyframes shadow {
       // 字型顏色變化
}

簡單捋一下，上述程式碼的核心就是：

  1. 父元素、子元素設定 transform-style: preserve-3d
  2. 用 span 元素的兩個偽元素複製兩個相同的字，利用 translateZ() 讓它們在 Z 軸間隔一定距離
  3. 新增簡單的旋轉、透明度、字型顏色變化

可以得到這樣一種類似電影開片的標題 3D 動畫，其實只有 3 層元素，但是由於角度恰當，視覺上的銜接比較完美，看上去就非常的 3D。

為什麼上面說需要合理的利用距離、角度及光影呢？

還是同一個動畫效果，如果動畫的初始旋轉角度設定的稍微大一點，整個效果就會穿幫：

可以看到，在前幾幀，能看出來簡單的分層結構。又或者，簡單調整一下 perspective，設定父容器的 perspective 由 2000px 改為 500px，穿幫效果更為明顯：

8

也就是說，在恰當的距離，合適的角度，我們僅僅通過很少的元素，就能在視覺上形成比較不錯的 3D 效果。

上述的完整程式碼，你可以猛擊這裡：CSS 靈感 -- 3D 文字出場動畫

3D 計數器

當然，發揮想象，我們還可以利用 3D 文字效果，製作出非常多有意思的效果。

譬如這個，我之前運用在我們業務的視覺化看板專案中的 3D 計數器：

程式碼比較長，就不貼出來了，但是也是使用純 CSS 可以實現的效果。

完整的程式碼，你可以猛擊這裡 CSS 靈感 -- 3D 數字計數動畫

空間效果

嗯，上述章節主要是關於文字的 3D 效果，下面我們繼續探尋 3D 在營造空間效果上的神奇之處。

優秀的 3D 效果，能讓人有一種身臨其境的感覺，都說 CSS 3D 其實作用有限，能做的不多，但是不代表它不能實現酷炫逼真的效果。

要營造逼真的 3D 效果，關鍵是恰當好處的運用 perspective 屬性。

簡單掌握原理，我們也可以很輕鬆的利用 CSS 3D 繪製一些非常有空間美感的效果。

這裡我帶領大家快速繪製一副具有空間美感的 CSS 3D 作品。

空間 3D 效果熱身

首先，我們藉助 Grid/Flex 等佈局，在螢幕上佈滿格子（item），隨意點就好：

<ul class="g-container">
  <li></li>
  <li></li>
  // ... 很多子 li
  <li></li>
</ul>

初始背景色為黑色，每個 item 填充為白色

接著，改變下每個 item 的形狀，讓他變成長條形的，可以改變通過改變 item 寬度，使用漸變填充部分等等方式：

接下來，父容器設定 transform-style: preserve-3d 和 perspective，子元素設定 transform: rotateX(45deg)，神奇的事情就發生了：

Wow，僅僅 3 步，我們就初步得到了一副具有空間美感的圖形，讓我們再回到每個子 item 的顏色設定，給它們隨機填充不同的顏色，並且加上一個 transform: translate3d() 的動畫，一個簡單的 CSS 3D 作品就繪製完成了：

基於這個技巧的變形和延伸，我們就可以繪製非常多類似的效果。

在這裡，我再次推薦 CSS-Doodle 這個工具，它可以幫助我們快速的創造複雜 CSS 效果。

CSS-doodle 是一個基於 Web-Component 的庫。允許我們快速的建立基於 CSS Grid 佈局的頁面，以實現各種 CSS 效果（或許可以稱之為 CSS 藝術）。

我們可以把上述的線條切換成圓弧：

完整的程式碼可以戳這裡，利用 CSS-Doodle 也就幾十行：CodePen Demo - CSS-Doodle Random Circle

又譬如袁川老師創作的 Seeding：

利用圖片素材

當然，基於上述技巧，有的時候會認為利用 CSS 繪製一些線條、圓弧、方塊比較麻煩。可以進一步嘗試利用現有的素材基於 CSS 3D 進行二次創作，這裡有一個非常有意思的技巧。

假設我們有這樣一張圖形：

這張圖先放著備用。在使用這張圖之前，我們會先繪製這樣一個圖形：

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
</div>

body {
  background: #000;
}
.g-container {
  position: relative;
}
.g-group {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -50px;
  top: -50px;
  transform-style: preserve-3d;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .5);
}
.item-right {
  background: red;
  transform: rotateY(90deg) translateZ(50px);
}
.item-left {
  background: green;
  transform: rotateY(-90deg) translateZ(50px);
}
.item-top {
  background: blue;
  transform: rotateX(90deg) translateZ(50px);
}
.item-bottom {
  background: deeppink;
  transform: rotateX(-90deg) translateZ(50px);
}
.item-middle {
  background: rgba(255, 255, 255, 0.5);
  transform: rotateX(180deg) translateZ(50px);
}

一共設定了 5 個子元素，不過仔細看 CSS 程式碼，其中 4 個子元素都設定了 rotateX/Y(90deg/-90deg)，也就是繞 X 軸或者 Y 軸旋轉了 90°，在視覺上是垂直螢幕的一張平面，所以直觀視覺上我們是不到的，只能看到一個平面 .item-middle。

我將 5 個子 item 設定了不同的背景色，結果如下：

現在看來，好像平平無奇，確實也是。

不過，見證奇蹟的時候來了，此時，我們給父元素 .g-container 設定一個極小的 perspective，譬如，設定一個 perspective: 4px，看看效果：

.g-container {
  position: relative;
+ perspective: 4px;
}
// ...其餘樣式保持不變

此時，畫風驟變，整個效果就變成了這樣：

由於 perspective 生效，原本的平面效果變成了 3D 的效果。接下來，我們使用上面準備好的星空圖，替換一下上面的背景顏色，全部都換成同一張圖，神奇的事情發生了：

由於設定的 perspective 非常之下，而每個 item 的 transform: translateZ(50px) 設定的又比較大，所以圖片在視覺上被拉伸的非常厲害。但是整體是充滿整個螢幕的。

接下來，我們只需要讓視角動起來，給父元素增加一個動畫，通過控制父元素的 translateZ() 進行變化即可：

.g-container{
  position: relative;
  perspective: 4px;
  perspective-origin: 50% 50%;
}

.g-group{
  position: absolute;
  // ... 一些定位高寬程式碼
  transform-style: preserve-3d;
  + animation: move 8s infinite linear;
}

@keyframes move {
  0%{
    transform: translateZ(-50px) rotate(0deg);
  }
  100%{
    transform: translateZ(50px) rotate(0deg);
  }
}

看看，神奇美妙的星空穿梭的效果就出來了，Amazing：

美中不足之處在於，動畫沒能無限銜接上，開頭和結尾都有很大的問題。

當然，這難不倒我們，我們可以：

  1. 通過疊加兩組同樣的效果，一組比另一組通過負的 animation-delay 提前行進，使兩組動畫銜接起來（一組結束的時候另外一組還在行進中）
  2. 再通過透明度的變化，隱藏掉 item-middle 迎面飛來的突兀感
  3. 最後，可以通過父元素的濾鏡 hue-rotate 控制圖片的顏色變化

我們嘗試修改 HTML 結構如下：

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
  <!-- 增加一組動畫 -->
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>    
  </div>
</div>

修改後的核心 CSS 如下：

.g-container{
  perspective: 4px;
  position: relative;
  // hue-rotate 變化動畫，可以讓圖片顏色一直變換
  animation: hueRotate 21s infinite linear;
}

.g-group{
  transform-style: preserve-3d;
  animation: move 12s infinite linear;
}
// 設定負的 animation-delay，讓第二組動畫提前進行
.g-group:nth-child(2){
  animation: move 12s infinite linear;
  animation-delay: -6s;
}
.item {
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  background-size: cover;
  opacity: 1;
  // 子元素的透明度變化，減少動畫銜接時候的突兀感
  animation: fade 12s infinite linear;
  animation-delay: 0;
}
.g-group:nth-child(2) .item {
  animation-delay: -6s;
}
@keyframes move {
  0%{
    transform: translateZ(-500px) rotate(0deg);
  }
  100%{
    transform: translateZ(500px) rotate(0deg);
  }
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  25%,
  60%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

最終完整的效果如下，星空穿梭的效果，整個動畫首尾相連，可以一直無限下去，幾乎沒有破綻，非常的贊：

上述的完整程式碼，你可以猛擊這裡：CSS 靈感 -- 3D 宇宙時空穿梭效果

3D 無限延伸視角動畫

OK，當掌握了上述技巧之後，我們可以很容易的對其繼續變形發散，實現各種各樣的無限延伸的 3D 視角動畫。

這裡還有一個非常有意思的運用了類似技巧的動畫：

原理與上述的星空穿梭大致相同，4 面牆的背景圖使用 CSS 漸變可以很輕鬆的繪製出來，接下來就只是需要考慮如何讓動畫能無限迴圈下去，控制好首尾的銜接。

該效果最早見於 jkantner 的 CodePen，在此基礎上我對其進行了完善和豐富，完整程式碼，你可以猛擊這裡：CSS 靈感 -- 3D 無限延伸視角動畫

視差效果

由於 CSS 3D 的特性，它天生就非常適合拿來製作一些視差效果。

本章節的內容之前在我的另外一篇文章，也有過一些討論 -- CSS 實現視差效果

原理就是：

  1. 我們給容器設定上 transform-style: preserve-3d 和 perspective: [x]px，那麼處於這個容器的子元素就將位於3D空間中，

  2. 再給子元素設定不同的 transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離螢幕（我們的眼睛）的距離也就不一樣

  3. 滾動滾動條，由於子元素設定了不同的 transform: translateZ()，那麼他們滾動的上下距離 translateY 相對螢幕（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果。

核心程式碼表示就是：

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {
        transform: translateZ(-1px);
    }
    .section-two {
        transform: translateZ(-2px);
    }
    .section-three {
        transform: translateZ(-3px);
    }
}

總結就是父元素設定 transform-style: preserve-3d 和 perspective: 1px，子元素設定不同的 transform: translateZ，滾動滾動條，效果如下：

CodePen Demo -- CSS 3D parallax

很明顯，當滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達到了所謂的滾動視差效果。

滾動視差文字陰影/虛影效果/多圖展示

那麼，運用 translate3d 的視差效果，又能有一些什麼好玩的效果呢？下面這個滾動視差文字陰影/虛影效果很有意思：

CodePen Demo -- CSS translate3d Parallax

另外一種就是我們可以把這個技巧運用到類似個人主頁，圖片展示等一些大屏場景下。

核心就是給每張圖片設定不同的 translateZ，給父元素設定一個 persepective 即可，這樣，在上下滾動的過程中，就能出現簡單的視差效果：

CodePen Demo -- CSS Scroll Parallax Effect

同理，這個滾動視差不僅僅可以作用於上下的滾動，對於左右方向的滾動也是同樣生效的：

CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman

其他實用場景介紹

在這一章節，會介紹一些有趣的，可以落地的 3D 效果或者動畫。

404 Rolling Box

在我自己的個人網站的 404 頁面，就使用 CSS 3D 實現的立方體制作的一個 404 效果：

其核心就在於在一個 CSS 3D 立方體的基礎上：

  1. 新增立方體的滾動動畫
  2. 控制下落的緩動函式，及落地的震盪動畫（為了效果更為逼真，運用了設計動畫中的預備動作、跟隨和重疊動畫等技巧）
  3. 控制立方體及地面數字畫面的平移
  4. 控制動畫的無限迴圈

整體制作還是非常有難度的，但是用在自己的 404 頁面，確實也是非常的酷炫。這個效果，我最早見於 Yusuke Nakaya 大神，完整的程式碼你可以戳這裡：CodePen -- Only CSS: 404 Rolling Box

立方體進度條

嗯，下面這個還是藉助了立方體。我們來實現一個立方體進度條~

首先，實現一個立方體，結構如下：

<div class="demo-cube perspective">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="left"></li>
  </ul>
</div>

我們可以把這個立方體想象成一個立體的進度條容器，通過控制 6 面的顏色，我們可以巧妙的得到一種 3D 進度條效果。

當然，其實我們不需要那麼多面，4 個面即可，去掉左右，然後利用漸變修改一下立方體各個面的顏色，去掉 border，核心的 CSS 程式碼如下：

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

我們就可以得到一個非常酷炫的 3D 進度條效果：

image

利用 CSS Property 給 3D 進度條加上動畫

當然，進度條嘛，它需要一個填充動畫。由於我們使用的是漸變實現的進度條的進度，需要去控制其中的顏色百分比變化。

而正常而言，CSS 是不支援漸變的動畫的，不過這也難不倒我們，因為我們可以使用 CSS @Property 。

簡單改造一下程式碼：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {
    --per: 0%;
  }
  90%,
  to {
    --per: 80%;
  }
}

這樣，我們就實現了一個會動的 3D 進度條，只需要控制 --per CSS 自定義屬性即可，效果如下：

對於 CSS @Property 不算很瞭解的，可以看看作者的這篇文章 -- CSS @property，讓不可能變可能，它的出現，讓 CSS 極大的提升了製作各種動畫的能力。

上述的完整程式碼，你可以猛擊這裡：CSS 靈感 -- 3D 立方體進度條

總結一下

感謝閱讀到此，如果認真看完上述內容，相信你一定會驚歎於 CSS 的神奇。希望本文的內容能夠讓你：

  • 瞭解 CSS 3D 的各種用途
  • 激發你新的靈感，感受動畫之美
  • 提升你的 CSS 動畫製作水平

當然，新奇有趣的 CSS 3D 內容還有很多，我還有非常多個有意思的 DEMO 沒有貼出來，當然對於本文的內容，我覺得已經足夠充實，剩下的下次繼續分享。

僅使用 CSS 能製作出多驚豔的動畫？我覺得這個問題沒有答案，隨著 CSS 語言不斷髮展，各種新特性的持續加入，雖然某些方面比不上一些更專業的語言，但是它也在便利性、易學性上有著自己的優勢。

最後

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章