使用CSS畫個(gè)大白(●-●)_html/css

我們的做法是在一個(gè)元素上，使用CSS動(dòng)態(tài)改變背景圖的位置，并且加上一些線性效果。

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

單個(gè)元素

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

樣式渲染

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

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

接下來，我們給臉定位，嘴巴只是一條黑線，我們使用border來實(shí)現(xiàn)。

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

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

問題是我們現(xiàn)在的元素是從容器的中點(diǎn)的開始，但不是出于中間位置。

為了抵消，我們使用transform把元素按照它本身寬的50%，高的40%，分別向左，向上移動(dòng)。

于是嘴巴的位置就像這樣

添加眼睛

我們使用before,after偽類來實(shí)現(xiàn)眼睛，這不需要多余的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); }

每一個(gè)偽類都有一個(gè)黑色背景，還有一個(gè)50%的border-radius，并且都定位到了嘴巴的邊上。最后使用skew轉(zhuǎn)換，使眼睛向中間靠攏一點(diǎn)，結(jié)果就變成這樣。

低電量

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

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

.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%; ... }

我們加了一個(gè)線性梯度的背景，讓它的高度為容器的兩倍，并且把上半部分定位在容器外邊。

有了背景，我們可以通過keyframes動(dòng)畫來控制整個(gè)動(dòng)作了。

@keyframes blink { 0%, 50% { background-position: 0 100%; } 85%, 95% { background-position: 0 75%; } 100% { background-position: 0 100%; }}

keyframes動(dòng)畫通過百分比定義了一些列幀，百分比跟動(dòng)畫執(zhí)行時(shí)間有關(guān)，所以50%表示動(dòng)畫的一半的時(shí)間。

這里我們在50%到85%的時(shí)間里面來做眨眼動(dòng)畫。

下一步就是要告訴偽類去執(zhí)行這個(gè)動(dòng)畫。把a(bǔ)nimation屬性加上。

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

上面的代碼設(shè)置了執(zhí)行時(shí)間為6秒，并且將會一直循環(huán)下去。

另外為了讓效果更加逼真，我們把a(bǔ)fter偽類加了個(gè)0.1s的延遲，所以看上去，第二只眼會慢一點(diǎn)點(diǎn)，看上去更萌了。

瀏覽器兼容

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

分享gif版本

這里有g(shù)if版本，你可以隨意分享到網(wǎng)上。

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

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