可以使用鍵框來(lái)使用CSS進(jìn)行動(dòng)畫(huà)SVG，以實(shí)現(xiàn)基本動(dòng)畫(huà)和過(guò)渡以實(shí)現(xiàn)交互式效果。 1。使用@keyframes來(lái)定義諸如刻度，不透明和顏色之類(lèi)的屬性的動(dòng)畫(huà)階段。 2。將動(dòng)畫(huà)應(yīng)用於SVG元素，例如，或通過(guò)CSS類(lèi)。 3。對(duì)於懸?；蚧稜顟B(tài)的效果，請(qǐng)?jiān)谔畛浠蜃儞Q（例如填充或變換）上使用CSS過(guò)渡。 4。避免使用CSS直接使用路徑數(shù)據(jù)（如路徑數(shù)據(jù)）進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。 5。利用變換功能和硬件加速技術(shù)來(lái)優(yōu)化性能。 6。請(qǐng)注意瀏覽器兼容性和樣式最佳實(shí)踐，例如避免進(jìn)行內(nèi)聯(lián)風(fēng)格。

使用CSS對(duì)SVG進(jìn)行動(dòng)畫(huà)是一種簡(jiǎn)單有效的方法，可以將生命帶入您的圖形而無(wú)需JavaScript。關(guān)鍵在於將標(biāo)準(zhǔn)CSS動(dòng)畫(huà)或過(guò)渡直接應(yīng)用於<path></path> ， <circle></circle>或<rect></rect>之類(lèi)的SVG元素。

基本動(dòng)畫(huà)：使用密鑰幀

動(dòng)畫(huà)SVG的最常見(jiàn)方法是使用@keyframes 。這使您可以定義動(dòng)畫(huà)階段，並控制SVG元素如何移動(dòng)，更改顏色，縮放或隨時(shí)間旋轉(zhuǎn)。

例如，如果您想為脈衝圈進(jìn)行動(dòng)畫(huà)：

 @keyframes pulse {
  0％{變換：比例尺（1）;不透明度：1; }
  50％{變換：比例尺（1.2）;不透明度：0.7; }
  100％{變換：比例（1）;不透明度：1; }
}

.pulse-circle {
  動(dòng)畫(huà)：脈衝2S無(wú)限；
}

將該類(lèi)應(yīng)用於SVG元素：

 <svg>
  <circle class =“ pulse-circle” cx =“ 50” cy =“ 50” r =“ 30” fill =“ blue” />
</svg>

當(dāng)您針對(duì)簡(jiǎn)單的視覺(jué)更改並希望它們?cè)谪?fù)載上循環(huán)或觸發(fā)時(shí)，這最有效。

基於過(guò)渡的效果：懸停和狀態(tài)變化

如果您想要基於互動(dòng)的動(dòng)畫(huà)（例如懸停效果或狀態(tài)變化），CSS轉(zhuǎn)換是理想的選擇。

您可以將transition屬性直接應(yīng)用於SVG元素：

 。 Interactive-Path {
  過(guò)渡：填充0.3秒；
}

?；?dòng)路徑：懸停{
  填充：紅色；
}

只需將課程添加到您的路徑：

 <svg>
  <path class =“互動(dòng)路徑” d =“ m10 10 ...” fill =“ blue” />
</svg>

記?。?/p>

• 並非所有SVG屬性都可以通過(guò)CSS（例如， d路徑）進(jìn)行動(dòng)畫(huà)。
• 使用transform函數(shù)（例如scale() ， rotate()和translate()自由使用。
• 確保will-change或transform用於促進(jìn)硬件加速。

造型陷阱和技巧

SVG元素對(duì)如何應(yīng)用樣式很敏感。這是一些要注意的事情：

• 如果您打算動(dòng)畫(huà)，請(qǐng)務(wù)必使用CSS類(lèi)，而不是內(nèi)聯(lián)樣式。
• 一些較舊的瀏覽器可能不支持對(duì)某些SVG屬性進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。
• 仔細(xì)地使用transform-origin - 在SVG中的行為與HTML的行為不同。
• 您可以通過(guò)在transition或animation聲明中用逗號(hào)分隔多個(gè)屬性來(lái)使多個(gè)屬性動(dòng)畫(huà)。

另外，請(qǐng)記住，複雜的形狀可能需要更先進(jìn)的技術(shù)，甚至需要GSAP等JS庫(kù)，尤其是在變形路徑時(shí)。

用CSS對(duì)SVG進(jìn)行動(dòng)畫(huà)功能很強(qiáng)大，但具有限制。對(duì)於諸如顏色變化，縮放或旋轉(zhuǎn)之類(lèi)的基本效果，它是完美的。只需確保您的SVG結(jié)構(gòu)乾淨(jìng)，CSS的目標(biāo)是正確的元素。
就是這樣 - 沒(méi)有什麼太花哨了，但是足以進(jìn)入矢量圖形。

以上是您如何使用CSS對(duì)SVG進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！