CSS中的“大白”——CSS 動畫

ThinkerZhang發表於2019-02-28
CSS動畫

譯者注：本文內容為 Baymax in CSS - CSS Animation 的譯文

CSS中的“大白”

讓我們用CSS從電影Big Hero 6中建立Baymax角色。

在這篇文章中，我們將動畫一個背景影象，以及一個微妙的動畫計時效果，並用一個單獨的HTML元素製作一個CSS演示。

CSS中的“大白”——CSS 動畫

你可以在這裡全屏看到它。

單個元素

通過使用偽元素，我們將能夠使用一個HTML元素建立面部部分。

<div class="baymax"></div>
複製程式碼

樣式

為了設定舞臺，我們將在螢幕上新增一個微妙的漸變，使其看起來像一個彎曲的白色頭。為此，我們將在body上使用徑向漸變。

body {
  background: radial-gradient(circle at center, #fff, #fff 50%, #aaa);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}
複製程式碼

接下來，我們將面部定位在頁面的中心。嘴是一條簡單的黑線，我們將使用邊框建立。

.baymax {
  border-bottom: 1.5em solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -40%);
}
複製程式碼

第一個屬性設定寬度為1.5em的黑色邊框。然後使用絕對定位定位線，將其向下推動50％，從左側向下推動50％。這些50％的值與容器（body）元素的大小有關。

我們現在遇到的問題是元素現在開始在螢幕的中間和中途開始。它偏離中心。

為了抵消這一點，我們使用一個變換將元素拉向其寬度的50％，並將其寬度增加40％。

在這個階段，嘴巴像這樣居中：

CSS中的“大白”——CSS 動畫

加眼睛

我們將利用before和after偽元素為面部新增眼睛。這不需要任何額外的HTML，完全由CSS處理。

.baymax::before {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  left: -9em;
  top: -6em;
  transform: skewX(-4deg);
}

.baymax::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  right: -9em;
  top: -6em;
  transform: skewX(4deg);
}
複製程式碼

這些偽元素中的每一個都具有黑色背景，並且邊界半徑為50％以使它們成為圓形。每個都位於嘴的一端，最後有一個skew變換，使它們看起來像是向後傾斜了一點。結果應如下所示：

CSS中的“大白”——CSS 動畫

低電量

電影中有一個有趣的場景，Baymax的電池電量不足。他四處亂竄，眼皮下垂。我們可以使用背景漸變和動畫的組合來建立效果。

首先我們要給背景兩種顏色。眼睛部分為黑色，黑色為眼瞼，白色為眼瞼。首先需要將白色部分放在眼睛外面，然後我們將其設定為動畫，使眼瞼下垂。

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}
複製程式碼

我們新增了一個背景線性漸變，使其成為容器高度的兩倍，然後將其定位，使上半部分位於容器外部。

有了兩個背景漸變，我們可以新增動畫keyframes來控制眼瞼運動。

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}
複製程式碼

動畫keyframes是一種使用百分比描述一系列幀的方法。百分比與動畫的持續時間有關。所以50％的百分比意味著動畫的一半。

通過這種方式，我們可以將背景設定為直到中途，然後在50％到85％之間，向下移動，然後在動畫結束時快速向後移動。

下一步是告訴偽元素使用這些動畫關鍵幀。將animation屬性新增到現有樣式。

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}
複製程式碼

在這裡，我們告訴瀏覽器在每個元素上使用blink動畫。動畫持續時間設定為6秒，並將無限迴圈。

在第二個例子中有一個額外的屬性。6s後的0.1秒告訴瀏覽器將該動畫延遲0.1秒。這會產生第二隻眼睛比第一隻眼睛稍晚關閉的效果。它增加了疲倦的下垂效果，使它看起來更加人性化。最終結果應如下所示：

CSS中的“大白”——CSS 動畫

你可以在這裡全屏看到它。

瀏覽器

在程式碼示例中，我省略了任何常用的-webkit和-moz字首。transform和animation屬性應該是字首，我建議使用像Autoprefixer這樣的東西。

可共享的gif版本

這是一個動畫gif版本，您可以更輕鬆地線上共享。

CSS中的“大白”——CSS 動畫

（完）

本文作者 Thinker

本文如有錯誤之處，請留言，我會及時更正

覺得對您有幫助的話就點個贊或收藏吧！

歡迎轉載或分享，轉載時請註明出處

閱讀原文

相關文章