bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

這篇文章主要講解了“怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象”吧！

公司專注于為企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、商城網(wǎng)站開(kāi)發(fā)，小程序制作，軟件按需策劃設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

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

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

下面我們來(lái)研究一下是怎么實(shí)現(xiàn)這個(gè)效果的：

首先設(shè)置整個(gè)頁(yè)面的背景顏色、線條的顏色、svg畫(huà)布的大小

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  color: #fff
}

 svg {
  display: block;
  width: 90vmin;
  height: 90vmin;
}

然后利用svg繪制出一個(gè)線條大象

<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
  <g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
	<path class="stroke" d="M2 66 
			 q0 -3 3 -3 q3 0 3 3
			 q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
			 s 15 -20 30 0 s -10 50 -20 35 m24 -25 
			 q 20 0 20 30 q0 10 -10 20
			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
			 q 0 -3 -2 -5 m 2 5
			 s -10 3 -20 0
			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
			 q 0 -5 -4 -10 m 4 23
			 h-3 q -6 0 -6 -3
			 l0 -12
			 q 0 -5 -6 -12
			 m 2 -5
			 l 3 1 m -3 -1
			 l -3 -2 m 3 2
			 q -10 30 -27 30
			 q -16 0 -16 -26
			 m 80.5 16.5
			 v11 q0 3 6 3 h2.5
			 m-40 -50
			 a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
			 m 11 -17
			 q 15 -15 23 5
			 m 27.8 20
			 q 0 5 5 10
			 h3 m-2 0 v2
			 ">
  </g>
</svg>

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

最后實(shí)現(xiàn)動(dòng)畫(huà)效果：

先使用stroke-dasharray屬性控制用來(lái)描邊的點(diǎn)劃線的圖案范式，stroke-dashoffset控制dash模式到路徑開(kāi)始的距離。這兩個(gè)屬性的值需要一致。

.stroke {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

設(shè)置這兩個(gè)屬性后，線條大象圖案會(huì)被隱藏，然后給.stroke元素綁定一個(gè)動(dòng)畫(huà)

.stroke {
  animation: stroke-anim 4s linear forwards;
}

使用@keyframes規(guī)則，給動(dòng)畫(huà)設(shè)置動(dòng)作，將stroke-dashoffsets屬性的值設(shè)置為0即可

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

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

ok！下面給出完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				margin: 0;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #000000;
				color: #fff
			}

			svg {
				display: block;
				width: 90vmin;
				height: 90vmin;
			}

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

			@keyframes stroke-anim {
				to {
					stroke-dashoffset: 0;
				}
			}
		</style>
	</head>
	<body>
		<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
			<g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
				<path class="stroke" d="M2 66 
			 q0 -3 3 -3 q3 0 3 3
			 q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
			 s 15 -20 30 0 s -10 50 -20 35 m24 -25 
			 q 20 0 20 30 q0 10 -10 20
			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
			 q 0 -3 -2 -5 m 2 5
			 s -10 3 -20 0
			 l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
			 q 0 -5 -4 -10 m 4 23
			 h-3 q -6 0 -6 -3
			 l0 -12
			 q 0 -5 -6 -12
			 m 2 -5
			 l 3 1 m -3 -1
			 l -3 -2 m 3 2
			 q -10 30 -27 30
			 q -16 0 -16 -26
			 m 80.5 16.5
			 v11 q0 3 6 3 h2.5
			 m-40 -50
			 a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
			 m 11 -17
			 q 15 -15 23 5
			 m 27.8 20
			 q 0 5 5 10
			 h3 m-2 0 v2
			 ">
			</g>
		</svg>
	</body>
</html>

大家可以直接復(fù)制以上代碼，在本地進(jìn)行運(yùn)行演示。

這里給大家介紹幾個(gè)關(guān)鍵的標(biāo)簽和屬性：

HTML5 <SVG>標(biāo)簽用于繪制圖像

<g> 用于把相關(guān)元素進(jìn)行組合的容器元素，

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

<path> ：定義一個(gè)路徑

怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象

animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性：

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

通過(guò) @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫(huà)。

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

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

    /* 或使用動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性*/
    animation: 動(dòng)畫(huà)名稱 1s ...
}

stroke-dasharray屬性可控制用來(lái)描邊的點(diǎn)劃線的圖案范式。作為一個(gè)外觀屬性，它也可以直接用作一個(gè)CSS樣式表內(nèi)部的屬性。

stroke-dashoffset 屬性指定了dash模式到路徑開(kāi)始的距離如果使用了一個(gè) <百分比> 值， 那么這個(gè)值就代表了當(dāng)前viewport的一個(gè)百分比。值可以取為負(fù)值。

感謝各位的閱讀，以上就是“怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文名稱：怎么用HTML5+CSS3動(dòng)態(tài)畫(huà)出一個(gè)大象
新聞來(lái)源：http://vcdvsql.cn/article22/peegcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站收錄、App設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、網(wǎng)站建設(shè)

廣告

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

營(yíng)銷型網(wǎng)站建設(shè)