CSS實現幻燈片特效代碼

/* 定義樣式 */
.slide {
position: relative;
height: 400px;
overflow: hidden;
}
.slide img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide img:first-child {
opacity: 1;
}
/* 定義動畫 */
@keyframes slide {
0% {
opacity: 1;
}
20% {
opacity: 0;
transform: translateX(-100%);
}
80% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
}
}
/* 應用動畫 */
.slide img:first-child {
animation: slide 5s infinite;
}
.slide img:nth-child(2) {
animation: slide 5s infinite 1s;
}
.slide img:nth-child(3) {
animation: slide 5s infinite 2s;
}

以上代碼實現了一個簡單的幻燈片特效，主要思路是通過CSS動畫實現圖片之間的無縫切換，最后應用到容器中。