欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么用HTML5+CSS3動態(tài)畫一個笑臉

本篇內(nèi)容介紹了“怎么用HTML5+CSS3動態(tài)畫一個笑臉”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創(chuàng)新互聯(lián)是專業(yè)的社旗網(wǎng)站建設公司，社旗接單;提供成都做網(wǎng)站、網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行社旗網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

怎么用HTML5+CSS3動態(tài)畫一個笑臉

下面我們來研究一下是怎么實現(xiàn)這個效果的：

首先設置整個頁面的背景顏色、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標簽，在當前文檔內(nèi)嵌套一個獨立的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動態(tài)畫一個笑臉

  • 在使用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動態(tài)畫一個笑臉

  • 將右邊的眼睛也畫出來

<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動態(tài)畫一個笑臉

  • 將嘴巴畫出來

<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動態(tài)畫一個笑臉

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

.stroke {
  stroke-linecap: round;
}

怎么用HTML5+CSS3動態(tài)畫一個笑臉

OK，笑臉畫出來了！最后實現(xiàn)動畫效果：

給.stroke元素綁定一個動畫，然后設置stroke-dasharray和stroke-dashoffset屬性，這樣笑臉圖案會被先隱藏起來

.stroke {
  animation: stroke-anim 2s linear forwards;  
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

使用@keyframes規(guī)則，給動畫設置動作，將stroke-dashoffsets屬性的值設置為0，這樣笑臉圖案就能慢慢顯示出來

@keyframes stroke-anim {
  to {
	stroke-dashoffset: 0;
  }
}

怎么用HTML5+CSS3動態(tài)畫一個笑臉

動畫效果雖然出來了，但不是我們想要的。我們需要使用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動態(tài)畫一個笑臉

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 圖像是使用各種元素創(chuàng)建的，這些元素分別應用于矢量圖像的結構、繪制與布局。如果svg不是根元素，svg 元素可以用于在當前文檔（比如說，一個HTML文檔）內(nèi)嵌套一個獨立的svg片段 。 這個獨立片段擁有獨立的視口和坐標系統(tǒng)。

  • <path> 路徑

path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來創(chuàng)建。SVG <path>元素用于繪制由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該 <path>元素可能是所有元素中最先進，最通用的SVG形狀。它可能也是最難掌握的元素。

  • animation 屬性和@keyframes 規(guī)則

/* 定義動畫*/
@keyframes 動畫名稱{
    /* 樣式規(guī)則*/
}

/* 將它應用于元素 */
.element {
    animation-name: 動畫名稱（在@keyframes中已經(jīng)聲明好的）;

    /* 或使用動畫簡寫屬性*/
    animation: 動畫名稱 1s ...
}

animation 屬性是一個簡寫屬性，可用于設置六個動畫屬性：

animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。   
animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計。   
animation-timing-function：規(guī)定動畫的速度曲線。   
animation-delay：規(guī)定在動畫開始之前的延遲。   
animation-iteration-count：規(guī)定動畫應該播放的次數(shù)。   
animation-direction：規(guī)定是否應該輪流反向播放動畫。

  • animation-delay 屬性定義動畫何時開始。

    該屬性值以秒或毫秒計；允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。

  • :nth-child()選擇器

    :nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。

    n 可以是一個數(shù)字，一個關鍵字，或者一個公式。

“怎么用HTML5+CSS3動態(tài)畫一個笑臉”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

網(wǎng)頁標題：怎么用HTML5+CSS3動態(tài)畫一個笑臉
轉載源于：http://www.chinadenli.net/article36/joegpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、企業(yè)建站、全網(wǎng)營銷推廣、網(wǎng)站制作、網(wǎng)站排名、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設