我們的做法是在一個元素上，使用CSS動態改變背景圖的位置，并且加上一些線性效果。

See the Pen Baymax face - Hero Number 6 by Donovan Hutchinson (@donovanh) on CodePen.

單個元素

通過使用偽類，我們能夠通過一個元素畫出臉的部分

樣式渲染

為了讓效果更加酷炫，我們這里在body上使用radial-gradient添加了微妙的顏色梯度變化，讓它更像一個頭。

body { background: radial-gradient(center, #fff, #fff 50%, #aaa); background-size: 100%; background-repeat: no-repeat; height: 100vh; }

接下來，我們給臉定位，嘴巴只是一條黑線，我們使用border來實現。

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

第一個屬性畫了一條寬為1.5em的邊。然后使用absolute定位，把位置定在容器（body）的中點，這里的50%是跟容器大小相關的。

問題是我們現在的元素是從容器的中點的開始，但不是出于中間位置。

為了抵消，我們使用transform把元素按照它本身寬的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%的border-radius，并且都定位到了嘴巴的邊上。最后使用skew轉換，使眼睛向中間靠攏一點，結果就變成這樣。

低電量

這是電影里面非常有趣的一幕，(●?●)沒電了，它的上下眼皮在打架。我們可以使用顏色梯度背景和動畫來實現。

首先，我們給背景兩個顏色，黑色用來展示睜開眼的狀態，白色代表瞇著眼。白色的部分一開始需要定位到眼睛外邊，然后使用動畫來讓眼臉下垂。

.baymax::before { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200%; ... } .baymax::after { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 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; ... }

上面的代碼設置了執行時間為6秒，并且將會一直循環下去。

另外為了讓效果更加逼真，我們把after偽類加了個0.1s的延遲，所以看上去，第二只眼會慢一點點，看上去更萌了。

瀏覽器兼容

在這個例子中，我省略了瀏覽器兼容性的東西，-webkit,-moz等等。動畫是需要考慮瀏覽器兼容性的，這里我推薦大家使用類似Autoprefixer的工具。

分享gif版本

這里有gif版本，你可以隨意分享到網上。

本文根據@cssanimation所譯，整篇譯文帶有我自己的理解和意思，如果有譯得不好的地方或者不對之處，還請大家指點。如需轉載此譯文，須注明英文出處：https://cssanimation.rocks/baymax/

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com