溫馨提示×

css怎么實現(xiàn)淡入淡出動畫效果

css
小億
377
2023-08-08 09:30:31
欄目: 編程語言

要實現(xiàn)淡入淡出動畫效果,您可以使用CSS的@keyframes規(guī)則和opacity屬性來控制元素的透明度。

下面是一個簡單的示例:

<!DOCTYPE html>

<html>

<head>

<style>

.fade-in-out {

  animation: fade-in-out 2s infinite;

}

@keyframes fade-in-out {

  0% { opacity: 0; }

  50% { opacity: 1; }

  100% { opacity: 0; }

}

</style>

</head>

<body>

<div class="fade-in-out">這是一個淡入淡出的文本。</div>

</body>

</html>

在上面的示例中,我們定義了一個名為fade-in-out的類,并將其應用于一個<div>元素。通過animation屬性,我們將fade-in-out動畫應用于元素。@keyframes規(guī)則定義了動畫的關鍵幀,在0%時元素的透明度為0,在50%時透明度為1,在100%時透明度再次變?yōu)?。最后,我們將動畫設置為循環(huán)播放(infinite),并指定動畫持續(xù)時間為2秒。

您可以根據(jù)需要自定義動畫效果,調(diào)整關鍵幀的百分比和元素的樣式屬性,以實現(xiàn)不同的淡入淡出效果。


0