欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用CSS制作3D動畫

 更新時間:2021年08月25日 09:31:49   作者:ChokCoco  
本文從各方面詳細(xì)講解了如何利用CSS的特性,從而實現(xiàn)各種有趣的3D動畫效果,需要學(xué)習(xí)的小伙伴一起來看看吧,可以參考一下本篇文章

CSS 3D 基礎(chǔ)知識

本文默認(rèn)讀者掌握一定的 CSS 3D 知識,能夠繪制初步的 3D 動畫效果。當(dāng)然這里會再簡單過一下 CSS 3D 的基礎(chǔ)知識。

使用 transform-style 啟用 3D 模式

要利用 CSS3 實現(xiàn) 3D 的效果,最主要的就是借助 transform-style 屬性。transform-style 只有兩個值可以選擇:

// 語法:
transform-style: flat|preserve-3d;
 
transform-style: flat; // 默認(rèn),子元素將不保留其 3D 位置
transform-style: preserve-3d; // 子元素將保留其 3D 位置。

當(dāng)我們指定一個容器的 transform-style 的屬性值為 preserve-3d 時,容器的后代元素便會具有 3D 效果,這樣說有點抽象,也就是當(dāng)前父容器設(shè)置了 preserve-3d 值后,它的子元素就可以相對于父元素所在的平面,進(jìn)行 3D 變形操作。

利用 perspective & perspective-origin 設(shè)置 3D視距,實現(xiàn)透視/景深效果

perspective 為一個元素設(shè)置三維透視的距離,僅作用于元素的后代,而不是其元素本身。

簡單來說,當(dāng)元素沒有設(shè)置 perspective 時,也就是當(dāng) perspective:none/0 時所有后代元素被壓縮在同一個二維平面上,不存在景深的效果。

而如果設(shè)置 perspective 后,將會看到三維的效果。

// 語法
perspective: number|none;

// 語法
perspective-origin: x-axis y-axis;
// x-axis : 定義該視圖在 x 軸上的位置。默認(rèn)值:50%
// y-axis : 定義該視圖在 y 軸上的位置。默認(rèn)值:50%

perspective-origin 表示 3D 元素透視視角的基點位置,默認(rèn)的透視視角中心在容器是 perspective 所在的元素,而不是他的后代元素的中點,也就是 perspective-origin: 50% 50%

通過繪制 Webpack Logo 熟悉 CSS 3D

對于初次接觸 CSS 3D 的同學(xué)而言,可以通過繪制正方體快速熟悉語法,了解規(guī)則。

而 Webpack 的 Logo,正是由 2 個 立方體組成:

以其中一個正方體而言,實現(xiàn)它其實非常容易:

  1. 1. 一個正方體由 6 個面組成,所以首先設(shè)定一個父元素 div,然后這個 div 再包含 6 個子 div,同時,父元素設(shè)置 transform-style: preserve-3d
  2. 2. 6 個子元素,依次首先旋轉(zhuǎn)不同角度,再通過 translateZ 位移正方體長度的一半距離即可
  3. 3. 父元素可以通過 transformperspective 調(diào)整視覺角度

以一個正方體為例子,簡單的偽代碼如下:

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

疊加兩個,調(diào)整顏色和透明度,我們可以非常輕松的實現(xiàn) Webpack 的 LOGO:

當(dāng)然,這里的 LOGO 為了保證每條線條視覺上的一致性,其實是沒有設(shè)置景深效果 perspective 的,我們可以嘗試給頂層父容器添加一下如下代碼,通過 transformperspective 調(diào)整視覺角度,設(shè)置景深效果:

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

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

完整的代碼,你可以戳這里:CodePen Demo -- Webpack LOGO

OK,熱身完畢,接下來,讓我們插上想象的翅膀,走進(jìn) CSS 3D 的世界。

實現(xiàn)文字的 3D 效果

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

要實現(xiàn)文字的 3D 效果,看起來是立體的,通常的方式就是疊加多層。

下面有一些實現(xiàn)一個文字的 3D 效果的方式。

假設(shè)我們有如下結(jié)構(gòu):

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

這樣,就有了基礎(chǔ)的 3D 視覺效果。

3D 氖燈文字效果

基于此,我們可以實現(xiàn)一些 3D 文字效果,來看一個 3D 氖燈文字效果,核心就是:

利用 text-shadow 疊加多層文字陰影

利用 animation 動態(tài)改變陰影顏色

<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 {
	// ... 陰影顏色變化
}

可以得到如下效果:

完整的代碼,你可以猛擊這里 CSS 靈感 -- 使用陰影實現(xiàn)文字的 3D 氖燈效果

利用 CSS 3D 配合 translateZ 實現(xiàn)真正的文字 3D 效果

當(dāng)然,上述第一種技巧其實沒有運(yùn)用 CSS 3D。下面我們使用 CSS 3D 配合 translateZ 再進(jìn)一步。

假設(shè)有如下結(jié)構(gòu):

<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 設(shè)置 transform-style: preserve-3d,給每個 <h1> 設(shè)定不同的 translateZ() 來達(dá)到文字的 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);
}

當(dāng)然,輔助一些旋轉(zhuǎn),色彩變化,就可以得到更純粹一些 3D 文字效果:

完整的代碼,你可以猛擊這里 CSS 靈感 -- 3D 光影變換文字效果

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

還有一種很有意思的技巧,制作的過程需要比較多的調(diào)試。

合理的利用距離、角度及光影構(gòu)建出不一樣的 3D 效果??纯聪旅孢@個例子,只是簡單是設(shè)置了三層字符,讓它們在 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 {
	// 字體旋轉(zhuǎn)
}
@keyframes shadow {
       // 字體顏色變化
}

簡單捋一下,上述代碼的核心就是:

  • 1.父元素、子元素設(shè)置 transform-style: preserve-3d
  • 2.用 span 元素的兩個偽元素復(fù)制兩個相同的字,利用 translateZ() 讓它們在 Z 軸間隔一定距離
  • 3.添加簡單的旋轉(zhuǎn)、透明度、字體顏色變化

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

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

還是同一個動畫效果,如果動畫的初始旋轉(zhuǎn)角度設(shè)置的稍微大一點,整個效果就會穿幫:

可以看到,在前幾幀,能看出來簡單的分層結(jié)構(gòu)。又或者,簡單調(diào)整一下 perspective,設(shè)置父容器的 perspective2000px 改為 500px,穿幫效果更為明顯:

也就是說,在恰當(dāng)?shù)木嚯x,合適的角度,我們僅僅通過很少的元素,就能在視覺上形成比較不錯的 3D 效果。

上述的完整代碼,你可以猛擊這里:CSS 靈感 -- 3D 文字出場動畫

3D 計數(shù)器

當(dāng)然,發(fā)揮想象,我們還可以利用 3D 文字效果,制作出非常多有意思的效果。

譬如這個,我之前運(yùn)用在我們業(yè)務(wù)的可視化看板項目中的 3D 計數(shù)器:

代碼比較長,就不貼出來了,但是也是使用純 CSS 可以實現(xiàn)的效果。

完整的代碼,你可以猛擊這里 CSS 靈感 -- 3D 數(shù)字計數(shù)動畫

空間效果

嗯,上述章節(jié)主要是關(guān)于文字的 3D 效果,下面我們繼續(xù)探尋 3D 在營造空間效果上的神奇之處。

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

要營造逼真的 3D 效果,關(guān)鍵是恰當(dāng)好處的運(yùn)用 perspective 屬性。

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

這里我?guī)ьI(lǐng)大家快速繪制一副具有空間美感的 CSS 3D 作品。

空間 3D 效果熱身

首先,我們借助 Grid/Flex 等布局,在屏幕上布滿格子(item),隨意點就好:

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

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

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

接下來,父容器設(shè)置 transform-style: preserve-3dperspective,子元素設(shè)置 transform: rotateX(45deg),神奇的事情就發(fā)生了:

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

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

在這里,我再次推薦 CSS-Doodle 這個工具,它可以幫助我們快速的創(chuàng)造復(fù)雜 CSS 效果。

CSS-doodle 是一個基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面,以實現(xiàn)各種 CSS 效果(或許可以稱之為 CSS 藝術(shù))。

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

完整的代碼可以戳這里,利用 CSS-Doodle 也就幾十行:CodePen Demo - CSS-Doodle Random Circle

又譬如袁川老師創(chuàng)作的 Seeding

利用圖片素材

當(dāng)然,基于上述技巧,有的時候會認(rèn)為利用 CSS 繪制一些線條、圓弧、方塊比較麻煩??梢赃M(jìn)一步嘗試?yán)矛F(xiàn)有的素材基于 CSS 3D 進(jìn)行二次創(chuàng)作,這里有一個非常有意思的技巧。

假設(shè)我們有這樣一張圖形:

這張圖先放著備用。在使用這張圖之前,我們會先繪制這樣一個圖形:

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

一共設(shè)置了 5 個子元素,不過仔細(xì)看 CSS 代碼,其中 4 個子元素都設(shè)置了 rotateX/Y(90deg/-90deg),也就是繞 X 軸或者 Y 軸旋轉(zhuǎn)了 90°,在視覺上是垂直屏幕的一張平面,所以直觀視覺上我們是不到的,只能看到一個平面 .item-middle。

我將 5 個子 item 設(shè)置了不同的背景色,結(jié)果如下:

現(xiàn)在看來,好像平平無奇,確實也是。

不過,見證奇跡的時候來了,此時,我們給父元素 .g-container 設(shè)置一個極小的 perspective,譬如,設(shè)置一個 perspective: 4px,看看效果:

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

此時,畫風(fēng)驟變,整個效果就變成了這樣:

由于 perspective 生效,原本的平面效果變成了 3D 的效果。接下來,我們使用上面準(zhǔn)備好的星空圖,替換一下上面的背景顏色,全部都換成同一張圖,神奇的事情發(fā)生了:

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

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

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

美中不足之處在于,動畫沒能無限銜接上,開頭和結(jié)尾都有很大的問題。

當(dāng)然,這難不倒我們,我們可以:

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

我們嘗試修改 HTML 結(jié)構(gòu)如下:

<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;
}
// 設(shè)置負(fù)的 animation-delay,讓第二組動畫提前進(jìn)行
.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,當(dāng)掌握了上述技巧之后,我們可以很容易的對其繼續(xù)變形發(fā)散,實現(xiàn)各種各樣的無限延伸的 3D 視角動畫。

這里還有一個非常有意思的運(yùn)用了類似技巧的動畫:

原理與上述的星空穿梭大致相同,4 面墻的背景圖使用 CSS 漸變可以很輕松的繪制出來,接下來就只是需要考慮如何讓動畫能無限循環(huán)下去,控制好首尾的銜接。

該效果最早見于 jkantner 的 CodePen,在此基礎(chǔ)上我對其進(jìn)行了完善和豐富,完整代碼,你可以猛擊這里:CSS 靈感 -- 3D 無限延伸視角動畫

視差效果

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

本章節(jié)的內(nèi)容之前在我的另外一篇文章,也有過一些討論 -- CSS 實現(xiàn)視差效果

原理就是:

  • 我們給容器設(shè)置上 transform-style: preserve-3dperspective: [x]px,那么處于這個容器的子元素就將位于3D空間中,
  • 再給子元素設(shè)置不同的 transform: translateZ(),這個時候,不同元素在 3D Z軸方向距離屏幕(我們的眼睛)的距離也就不一樣
  • 滾動滾動條,由于子元素設(shè)置了不同的 transform: translateZ(),那么他們滾動的上下距離 translateY 相對屏幕(我們的眼睛),也是不一樣的,這就達(dá)到了滾動視差的效果。

核心代碼表示就是:

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

總結(jié)就是父元素設(shè)置 transform-style: preserve-3dperspective: 1px,子元素設(shè)置不同的 transform: translateZ,滾動滾動條,效果如下:

CodePen Demo -- CSS 3D parallax

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

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

那么,運(yùn)用 translate3d 的視差效果,又能有一些什么好玩的效果呢?下面這個滾動視差文字陰影/虛影效果很有意思:

CodePen Demo -- CSS translate3d Parallax

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

核心就是給每張圖片設(shè)置不同的 translateZ,給父元素設(shè)置一個 persepective 即可,這樣,在上下滾動的過程中,就能出現(xiàn)簡單的視差效果:

CodePen Demo -- CSS Scroll Parallax Effect

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

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

其他實用場景介紹

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

404 Rolling Box

在我自己的個人網(wǎng)站的 404 頁面,就使用 CSS 3D 實現(xiàn)的立方體制作的一個 404 效果:

其核心就在于在一個 CSS 3D 立方體的基礎(chǔ)上:

添加立方體的滾動動畫

控制下落的緩動函數(shù),及落地的震蕩動畫(為了效果更為逼真,運(yùn)用了設(shè)計動畫中的預(yù)備動作、跟隨和重疊動畫等技巧)

控制立方體及地面數(shù)字畫面的平移

控制動畫的無限循環(huán)

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

立方體進(jìn)度條

嗯,下面這個還是借助了立方體。我們來實現(xiàn)一個立方體進(jìn)度條~

首先,實現(xiàn)一個立方體,結(jié)構(gòu)如下:

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

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

當(dāng)然,其實我們不需要那么多面,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 進(jìn)度條效果:

利用 CSS Property 給 3D 進(jìn)度條加上動畫

當(dāng)然,進(jìn)度條嘛,它需要一個填充動畫。由于我們使用的是漸變實現(xiàn)的進(jìn)度條的進(jìn)度,需要去控制其中的顏色百分比變化。

而正常而言,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%;
  }
}

這樣,我們就實現(xiàn)了一個會動的 3D 進(jìn)度條,只需要控制 --per CSS 自定義屬性即可,效果如下:

對于 CSS @Property 不算很了解的,可以看看作者的這篇文章 -- CSS @property,讓不可能變可能,它的出現(xiàn),讓 CSS 極大的提升了制作各種動畫的能力。

上述的完整代碼,你可以猛擊這里:CSS 靈感 -- 3D 立方體進(jìn)度條

總結(jié)一下

感謝閱讀到此,如果認(rèn)真看完上述內(nèi)容,相信你一定會驚嘆于 CSS 的神奇。希望本文的內(nèi)容能夠讓你:

1.了解 CSS 3D 的各種用途

2.激發(fā)你新的靈感,感受動畫之美提

3.升你的 CSS 動畫制作水平

當(dāng)然,新奇有趣的 CSS 3D 內(nèi)容還有很多,我還有非常多個有意思的 DEMO 沒有貼出來,當(dāng)然對于本文的內(nèi)容,我覺得已經(jīng)足夠充實,剩下的下次繼續(xù)分享。

僅使用 CSS 能制作出多驚艷的動畫?我覺得這個問題沒有答案,隨著 CSS 語言不斷發(fā)展,各種新特性的持續(xù)加入,雖然某些方面比不上一些更專業(yè)的語言,但是它也在便利性、易學(xué)性上有著自己的優(yōu)勢。

到此這篇關(guān)于利用CSS制作3D動畫的文章就介紹到這了,更多相關(guān)CSS制作3D動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論