在先前的文章中我們介紹了利用HTML5 CSS3動態畫出一個大象的方法，有興趣的可以點選連結查閱→《HTML5 CSS3動態畫出一個大象》。這次我們繼續聊聊利用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 viewBox="-50 -50 100 100">
</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>
</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>
</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>
登入後複製
#給.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>登入後複製
大家可以直接複製以上程式碼，在本地進行運行演示。
這裡要為大家介紹幾個關鍵的標籤和屬性：
- #
- 路徑
#path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來建立。 SVG 元素用於繪製由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該 元素可能是所有元素中最先進，最通用的SVG形狀。它可能也是最難掌握的元素。
animation- 屬性和
@keyframes 規則##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}</pre><div class="contentsignin">登入後複製</div></div>animation 屬性是一個簡寫屬性，可用來設定六個動畫屬性：
animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
登入後複製
PHP中文網平台有非常多的影片教學資源，歡迎大家學習《css影片教學》《HTML影片教學》！
以上是如何使用HTML5+CSS3動態畫出笑臉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
