溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用HTML5+CSS3動態畫一個笑臉”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
今天本文的主要內容是：利用HTML5 svg繪制出一個線條笑臉，然后使用CSS3給它添加動畫效果，讓它可以慢慢被畫出來。光說可能大家還不明白是什么效果，我們直接來看看效果圖：
下面我們來研究一下是怎么實現這個效果的：
首先設置整個頁面的背景顏色、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繪制出一個線條笑臉
定義svg標簽，在當前文檔內嵌套一個獨立的svg片段
<svg viewBox="-50 -50 100 100"> </svg>
定義一個path標簽，畫一個圓
<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標簽畫左邊的眼睛
<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元素添加一個stroke-linecaps屬性，將嘴巴路徑兩端的形狀設置為圓弧。
.stroke {
stroke-linecap: round;
}
OK，笑臉畫出來了！最后實現動畫效果：
給.stroke元素綁定一個動畫，然后設置stroke-dasharray和stroke-dashoffset屬性，這樣笑臉圖案會被先隱藏起來
.stroke {
animation: stroke-anim 2s linear forwards;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}使用@keyframes規則，給動畫設置動作，將stroke-dashoffsets屬性的值設置為0，這樣笑臉圖案就能慢慢顯示出來
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
動畫效果雖然出來了，但不是我們想要的。我們需要使用animation-delay定義每一步動作的開始時間，先畫出臉，再畫左眼和右眼，最后畫出嘴巴：
.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>大家可以直接復制以上代碼，在本地進行運行演示。
這里給大家介紹幾個關鍵的標簽和屬性：
<svg> 元素
SVG 圖像是使用各種元素創建的，這些元素分別應用于矢量圖像的結構、繪制與布局。如果svg不是根元素，svg 元素可以用于在當前文檔（比如說，一個HTML文檔）內嵌套一個獨立的svg片段 。 這個獨立片段擁有獨立的視口和坐標系統。
<path> 路徑
path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來創建。SVG <path>元素用于繪制由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該 <path>元素可能是所有元素中最先進，最通用的SVG形狀。它可能也是最難掌握的元素。
animation 屬性和@keyframes 規則
/* 定義動畫*/
@keyframes 動畫名稱{
/* 樣式規則*/
}
/* 將它應用于元素 */
.element {
animation-name: 動畫名稱（在@keyframes中已經聲明好的）;
/* 或使用動畫簡寫屬性*/
animation: 動畫名稱 1s ...
}animation 屬性是一個簡寫屬性，可用于設置六個動畫屬性：
animation-name：規定需要綁定到選擇器的 keyframe 名稱。。 animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。 animation-timing-function：規定動畫的速度曲線。 animation-delay：規定在動畫開始之前的延遲。 animation-iteration-count：規定動畫應該播放的次數。 animation-direction：規定是否應該輪流反向播放動畫。
animation-delay 屬性定義動畫何時開始。
該屬性值以秒或毫秒計；允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。
:nth-child()選擇器
:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。
n 可以是一個數字，一個關鍵字，或者一個公式。
“怎么用HTML5+CSS3動態畫一個笑臉”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
