站長資訊網(wǎng)在之前的文章中我們介紹了利用HTML5+CSS3動態(tài)畫出一個(gè)大象的方法，感興趣的可以點(diǎn)擊鏈接進(jìn)行查閱→《HTML5+CSS3動態(tài)畫出一個(gè)大象》。這次我們繼續(xù)聊聊利用HTML5+CSS3實(shí)現(xiàn)動畫效果，介紹一下動態(tài)畫一個(gè)笑臉的方法。
今天本文的主要內(nèi)容是：利用HTML5 svg繪制出一個(gè)線條笑臉，然后使用CSS3給它添加動畫效果，讓它可以慢慢被畫出來。光說可能大家還不明白是什么效果，我們直接來看看效果圖：
下面我們來研究一下是怎么實(shí)現(xiàn)這個(gè)效果的：
首先設(shè)置整個(gè)頁面的背景顏色、svg畫布的大小、線條的顏色、
body { background: #222; display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; } svg { display: block; height: 90vmin; width: 90vmin; } .stroke { stroke-width: 1; stroke: #fff; fill: none; }
然后利用svg繪制出一個(gè)線條笑臉
-
定義svg標(biāo)簽，在當(dāng)前文檔內(nèi)嵌套一個(gè)獨(dú)立的svg片段
<svg viewBox="-50 -50 100 100"> </svg>
-
定義一個(gè)path標(biāo)簽，畫一個(gè)圓
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> </svg>
-
在使用path標(biāo)簽畫左邊的眼睛
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
-
將右邊的眼睛也畫出來
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
-
將嘴巴畫出來
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path> </svg>
給.stroke元素添加一個(gè)stroke-linecaps屬性，將嘴巴路徑兩端的形狀設(shè)置為圓弧。
.stroke { stroke-linecap: round; }
OK，笑臉畫出來了！最后實(shí)現(xiàn)動畫效果：
給.stroke元素綁定一個(gè)動畫，然后設(shè)置stroke-dasharray和stroke-dashoffset屬性，這樣笑臉圖案會被先隱藏起來
.stroke { animation: stroke-anim 2s linear forwards; stroke-dasharray: 300; stroke-dashoffset: 300; }
使用@keyframes規(guī)則，給動畫設(shè)置動作，將stroke-dashoffsets屬性的值設(shè)置為0，這樣笑臉圖案就能慢慢顯示出來
@keyframes stroke-anim { to { stroke-dashoffset: 0; } }
動畫效果雖然出來了，但不是我們想要的。我們需要使用animation-delay定義每一步動作的開始時(shí)間，先畫出臉，再畫左眼和右眼，最后畫出嘴巴：
.stroke:nth-child(2) { animation-delay: 2s; } .stroke:nth-child(3) { animation-delay: 3s; } .stroke:nth-child(4) { animation-delay: 4s; } @keyframes stroke-anim { to { stroke-dashoffset: 0; } }
ok，完成！下面給出完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: #222; display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; } svg { display: block; height: 90vmin; width: 90vmin; } .stroke { stroke-width: 1; stroke: #fff; fill: none; stroke-linecap: round; animation: stroke-anim 2s linear forwards; stroke-dasharray: 300; stroke-dashoffset: 300; } .stroke:nth-child(2) { animation-delay: 2s; } .stroke:nth-child(3) { animation-delay: 3s; } .stroke:nth-child(4) { animation-delay: 4s; } @keyframes stroke-anim { to { stroke-dashoffset: 0; } } </style> </head> <body> <svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path> </svg> </body> </html>
大家可以直接復(fù)制以上代碼，在本地進(jìn)行運(yùn)行演示。
這里給大家介紹幾個(gè)關(guān)鍵的標(biāo)簽和屬性：
-
<svg>元素
SVG 圖像是使用各種元素創(chuàng)建的，這些元素分別應(yīng)用于矢量圖像的結(jié)構(gòu)、繪制與布局。如果svg不是根元素，svg 元素可以用于在當(dāng)前文檔（比如說，一個(gè)HTML文檔）內(nèi)嵌套一個(gè)獨(dú)立的svg片段 。 這個(gè)獨(dú)立片段擁有獨(dú)立的視口和坐標(biāo)系統(tǒng)。
-
<path>路徑
path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來創(chuàng)建。SVG <path>元素用于繪制由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該 <path>元素可能是所有元素中最先進(jìn)，最通用的SVG形狀。它可能也是最難掌握的元素。
-
animation屬性和@keyframes規(guī)則
/* 定義動畫*/ @keyframes 動畫名稱{ /* 樣式規(guī)則*/ } /* 將它應(yīng)用于元素 */ .element { animation-name: 動畫名稱（在@keyframes中已經(jīng)聲明好的）; /* 或使用動畫簡寫屬性*/ animation: 動畫名稱 1s ... }
animation 屬性是一個(gè)簡寫屬性，可用于設(shè)置六個(gè)動畫屬性：
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。 animation-duration：規(guī)定完成動畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 animation-timing-function：規(guī)定動畫的速度曲線。 animation-delay：規(guī)定在動畫開始之前的延遲。 animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)。 animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫。
-
animation-delay屬性定義動畫何時(shí)開始。該屬性值以秒或毫秒計(jì)；允許負(fù)值，-2s 使動畫馬上開始，但跳過 2 秒進(jìn)入動畫。
-
:nth-child()選擇器:nth-child(n) 選擇器匹配父元素中的第 n 個(gè)子元素，元素類型沒有限制。
n 可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》《HTML視頻教程》！
