CSS 圖片淡入淡出與溶解切換效果實作指南

需求場景

類似 PowerPoint 的「向內溶解」效果：多張照片牆或大圖輪播時，舊圖逐漸透明消失，新圖逐漸顯現，形成平滑過渡。

核心技術方案

方案一：CSS Cross-fade（現代瀏覽器）

.fade-container {
    position: relative;
    width: 800px; height: 400px;
}
.fade-container img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.fade-container img.active { opacity: 1; }

方案二：jQuery Cycle2 / Slick 輪播套件（生產環境推薦）

<div class="slider">
    <img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>

$('.slider').slick({
    fade: true,           // 啟用淡入淡出
    cssEase: 'linear',    // 線性過渡
    autoplay: true,
    autoplaySpeed: 3000
});

方案三：CSS Mask 溶解效果（進階）

.dissolve {
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 100%);
    mask-image: radial-gradient(circle, black 0%, transparent 100%);
    -webkit-mask-size: 0%;
    mask-size: 0%;
    transition: mask-size 1s ease;
}
.dissolve.show { mask-size: 200%; }

jQuery 焦點圖經典代碼參考

搜尋關鍵字：「jQuery 焦點圖代碼、幻燈過渡特效、仿 IE 特效濾鏡」可找到大量現成元件。

效能與相容性建議

無障礙注意事項

• 提供暫停/播放控制
• 避免閃爍頻率 > 3Hz（防癲癇誘發）
• 重要資訊勿僅靠動畫呈現