在先前的文章中我們介紹了利用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標籤，在目前文件內嵌套一個獨立的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-linecap: round;
}
最後實現動畫效果：
給.stroke元素綁定一個動畫，然後設定stroke-dasharray和stroke-dashoffset屬性，這樣笑臉圖案會被先隱藏起來.stroke {
animation: stroke-anim 2s linear forwards;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
.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;
}
}
<!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>大家可以直接複製以上程式碼，在本地進行運行演示。
這裡要為大家介紹幾個關鍵的標籤和屬性：
@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：规定是否应该轮流反向播放动画。
該屬性值以秒或毫秒計；允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。
:nth-child(n) 選擇器符合父元素中的第n 個子元素，元素類型沒有限制。 n 可以是一個數字，一個關鍵字，或一個公式。
PHP中文網平台有非常多的影片教學資源，歡迎大家學習《css影片教學》《HTML影片教學》！
以上是如何使用HTML5+CSS3動態畫出笑臉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
