CSS中的「大白」——CSS 動畫

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

CSS中的「大白」

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

在這篇文章中，咱們將動畫一個背景圖像，以及一個微妙的動畫計時效果，並用一個單獨的HTML元素製做一個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％。

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

加眼睛

咱們將利用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變換，使它們看起來像是向後傾斜了一點。結果應以下所示：

低電量

電影中有一個有趣的場景，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秒。這會產生第二隻眼睛比第一隻眼睛稍晚關閉的效果。它增長了疲倦的下垂效果，使它看起來更加人性化。最終結果應以下所示：

你能夠在這裏全屏看到它。

瀏覽器

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

可共享的gif版本

這是一個動畫gif版本，您能夠更輕鬆地在線共享。

（完）

本文做者 Thinker

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

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

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

閱讀原文