CSS淡入淡出動(dòng)畫效果可以通過(guò)使用CSS的transition和opacity屬性來(lái)實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例代碼，展示了如何實(shí)現(xiàn)這一效果：
<!DOCTYPE html>
<html>
<head>
<style>
.fade-in-out {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.fade-in-out.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="fade-in-out">這是一段淡入淡出的文本。</div>
<button onclick="toggleFade()">切換淡入淡出效果</button>
<script>
function toggleFade() {
var element = document.querySelector('.fade-in-out');
if (element.classList.contains('active')) {
element.classList.remove('active');
} else {
element.classList.add('active');
}
}
</script>
</body>
</html>在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.fade-in-out的CSS類，用于定義淡入淡出動(dòng)畫的樣式和過(guò)渡效果，這個(gè)類將元素的opacity設(shè)置為0，并通過(guò)transition屬性定義了一個(gè)2秒的淡入淡出動(dòng)畫，我們創(chuàng)建了一個(gè)名為.active的類，用于激活淡入淡出動(dòng)畫，通過(guò)JavaScript腳本，我們可以控制這個(gè)類的添加和移除，從而實(shí)現(xiàn)文本的淡入淡出效果。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。
