我的思路是将要展示的图片都放在一个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;
}
}
}