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

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

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

單個(gè)元素

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

樣式渲染

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

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

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

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

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

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

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

于是嘴巴的位置就像這樣

添加眼睛

我們使用before,after偽類來(lái)實(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é)果就變成這樣。

低電量

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

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

.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è)線性梯度的背景，讓它的高度為容器的兩倍，并且把上半部分定位在容器外邊。

有了背景，我們可以通過(guò)keyframes動(dòng)畫(huà)來(lái)控制整個(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)畫(huà)通過(guò)百分比定義了一些列幀，百分比跟動(dòng)畫(huà)執(zhí)行時(shí)間有關(guān)，所以50%表示動(dòng)畫(huà)的一半的時(shí)間。

這里我們?cè)?0%到85%的時(shí)間里面來(lái)做眨眼動(dòng)畫(huà)。

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

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

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

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

瀏覽器兼容

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

分享gif版本

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

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

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