如何使用HTML5+CSS3動態畫出笑臉-H5教程-PHP中文網

首頁

web前端

H5教程

如何使用HTML5+CSS3動態畫出笑臉

青灯夜游

Aug 31, 2021 am 11:34 AM

css3html5svg動畫

在先前的文章中我們介紹了利用HTML5 CSS3動態畫出一個大象的方法，有興趣的可以點選連結查閱→《HTML5 CSS3動態畫出一個大象》。這次我們繼續聊聊利用HTML5 CSS3實現動畫效果，介紹一下動態畫一個笑臉的方法。

今天本文的主要內容是：利用HTML5 svg繪製出一個線條笑臉，然後使用CSS3為它添加動畫效果，讓它可以慢慢被畫出來。光說可能大家還不明白是什麼效果，我們直接來看看效果圖：

如何使用HTML5+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>

如何使用HTML5+CSS3動態畫出笑臉

在使用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>

如何使用HTML5+CSS3動態畫出笑臉

將右邊的眼睛也畫出來

<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>

如何使用HTML5+CSS3動態畫出笑臉

##將嘴巴畫出來

<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>

如何使用HTML5+CSS3動態畫出笑臉

#給.stroke元素加入一個stroke-linecaps屬性，將嘴巴路徑兩端的形狀設定為圓弧。

.stroke {
  stroke-linecap: round;
}

如何使用HTML5+CSS3動態畫出笑臉

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;
  }
}

如何使用HTML5+CSS3動態畫出笑臉 ##動畫效果雖然出來了，但不是我們想要的。我們需要使用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;
  }
}

如何使用HTML5+CSS3動態畫出笑臉 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 元素可以用於在目前文件（比如說，一個HTML文件）內嵌套一個獨立的svg片段。這個獨立片段擁有獨立的視口和座標系統。

路徑

#path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來建立。 SVG 元素用於繪製由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該元素可能是所有元素中最先進，最通用的SVG形狀。它可能也是最難掌握的元素。

屬性和

@keyframes 規則##<pre class='brush:php;toolbar:false;'>/* 定义动画*/ @keyframes 动画名称{ /* 样式规则*/ } /* 将它应用于元素 */ .element { animation-name: 动画名称（在@keyframes中已经声明好的）; /* 或使用动画简写属性*/ animation: 动画名称 1s ... }</pre>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 可以是一個數字，一個關鍵字，或一個公式。

PHP中文網平台有非常多的影片教學資源，歡迎大家學習《css影片教學》《HTML影片教學》！

以上是如何使用HTML5+CSS3動態畫出笑臉的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。

See all articles