CSS自動切換DIV是一種常見的網頁動效，常常用于輪播圖、廣告欄等場合。本文將介紹一種實現該動效的方法。

.slider {
display: none;
position: absolute;
}
.slider.active {
display: block;
}

首先，給需要切換的DIV添加一個class為“slider”。并且初始將其display屬性設為none，通過絕對定位，使其不影響文檔流。

.slider:first-child {
display: block;
}
.slider.active ~ .slider:first-child {
display: block;
}
.slider.active {
animation: fade 1s ease-in-out forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

然后通過CSS選擇器，使第一個DIV的display屬性設為block，用波浪線Selectors（CSS3自身新增的一種選擇符）設置當一個DIV的前一個兄弟元素有active類時，其display屬性也設為block，實現DIV的循環切換。最后添加動效，使切換時漸變消失和出現。

使用JS實現該動效也是可行的，但是使用CSS可以避免JS帶來的額外網站負擔和瀏覽器兼容性問題。