```wxss
.swiper-container{
  height: 500rpx;
  overflow: hidden;
  position: relative;
}

.swiper{
  width: 100%;
  height: 100%;
}

.swiper-item{
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-item image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.swiper-pagination-bullet{
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .5);
  margin: 0 10rpx;
}

.swiper-pagination-bullet-active{
  background-color: #ffffff;
}

.swiper-pagination{
  bottom: 30rpx;
}

.swiper-pagination-bullet::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.swiper-pagination-bullet-active::after{
  opacity: 1;
}

.swiper-item:nth-child(1) image{
  animation: fade-in 1s ease-in-out;
}

.swiper-item:nth-child(2) image{
  animation: fade-in 1s ease-in-out .2s forwards;
}

.swiper-item:nth-child(3) image{
  animation: fade-in 1s ease-in-out .4s forwards;
}

.swiper-item:nth-child(4) image{
  animation: fade-in 1s ease-in-out .6s forwards;
}

@keyframes fade-in{
  from{
    opacity: 0;
    transform: scale(1.2);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* 说明:此样式实现了轮播图的自动播放、指示器、切换动画等功能,具有较好的交互体验。其中,指示器样式为白色圆点,当前页圆点为白色实心圆,图片切换时带有缩放渐显动画。 */

原文地址: https://www.cveoy.top/t/topic/m71d 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录