微信小程序轮播图酷炫样式:自动播放、指示器、动画效果
```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 著作权归作者所有。请勿转载和采集!