溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用HTML5+CSS3動(dòng)態(tài)畫出一個(gè)大象”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5+CSS3動(dòng)態(tài)畫出一個(gè)大象”吧！
今天本文的主要內(nèi)容是：利用HTML5 svg繪制出一個(gè)線條大象，然后給它添加動(dòng)畫效果，讓它可以慢慢被畫出來。光說可能大家還不明白是什么效果，我們直接來看看效果圖：
下面我們來研究一下是怎么實(shí)現(xiàn)這個(gè)效果的：
首先設(shè)置整個(gè)頁面的背景顏色、線條的顏色、svg畫布的大小
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>
最后實(shí)現(xiàn)動(dòng)畫效果：
先使用stroke-dasharray屬性控制用來描邊的點(diǎn)劃線的圖案范式，stroke-dashoffset控制dash模式到路徑開始的距離。這兩個(gè)屬性的值需要一致。
.stroke {
stroke-dasharray: 300;
stroke-dashoffset: 300;
}設(shè)置這兩個(gè)屬性后，線條大象圖案會(huì)被隱藏，然后給.stroke元素綁定一個(gè)動(dòng)畫
.stroke {
animation: stroke-anim 4s linear forwards;
}使用@keyframes規(guī)則，給動(dòng)畫設(shè)置動(dòng)作，將stroke-dashoffsets屬性的值設(shè)置為0即可
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
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)行組合的容器元素，
<path> ：定義一個(gè)路徑
animation 屬性是一個(gè)簡寫屬性：
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。 animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 animation-timing-function：規(guī)定動(dòng)畫的速度曲線。 animation-delay：規(guī)定在動(dòng)畫開始之前的延遲。 animation-iteration-count：規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。 animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
通過 @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。
/* 定義動(dòng)畫*/
@keyframes 動(dòng)畫名稱{
/* 樣式規(guī)則*/
}
/* 將它應(yīng)用于元素 */
.element {
animation-name: 動(dòng)畫名稱（在@keyframes中已經(jīng)聲明好的）;
/* 或使用動(dòng)畫簡寫屬性*/
animation: 動(dòng)畫名稱 1s ...
}stroke-dasharray屬性可控制用來描邊的點(diǎn)劃線的圖案范式。作為一個(gè)外觀屬性，它也可以直接用作一個(gè)CSS樣式表內(nèi)部的屬性。
stroke-dashoffset 屬性指定了dash模式到路徑開始的距離如果使用了一個(gè) <百分比> 值， 那么這個(gè)值就代表了當(dāng)前viewport的一個(gè)百分比。值可以取為負(fù)值。
感謝各位的閱讀，以上就是“怎么用HTML5+CSS3動(dòng)態(tài)畫出一個(gè)大象”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5+CSS3動(dòng)態(tài)畫出一個(gè)大象這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼