我的思路是將要展示的圖片都放在一個div里面通過定時器，動態控制要展示那一張
html
script
style
.welcome__banner {
position: relative;
background: rgba(255, 255, 255, 1);
border-radius: 6px;
height: 30%;
width: 100%;
.banner__img {
// position: absolute;
width: 100%;
height: 100%;
// animation: fade 10s 0s infinite;
animation-name: fade; //規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration: 5s; //規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function: ease-in-out; //規定動畫的速度曲線。
// animation-delay: 2s; //規定在動畫開始之前的延遲。
animation-iteration-count: infinite; //規定動畫應該播放的次數。
animation-direction: normal; //規定是否應該輪流反向播放動畫。
z-index: 50;
}
@keyframes fade {
0% {
opacity: 0.1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
}