废话不多说上效果图
源码
HTML部分
<div class="containerBoxLBT">
<div class="swiper-button-next swiper-icon"></div>
<div class="swiper-button-prev swiper-icon"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141712.webp">
<div class="title">
<span>狗是人类最好的朋友</span>
<p>Dogs are man's best friend</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141720.webp">
<div class="title">
<span>健康是财富</span>
<p>Health is wealth.</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141722.webp">
<div class="title">
<span>时间是最珍贵的财富</span>
<p>Time is the most precious wealth</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141725.webp">
<div class="title">
<span>爱是世界上最强大的力量</span>
<p>Love is the most powerful force in the world</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141728.webp">
<div class="title">
<span>明天是新的一天</span>
<p>Tomorrow is a new day</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
CSS部分
<style>
body {
margin: 0;
padding: 0;
}
@keyframes imgScale {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes revealText {
0% {
clip-path: inset(0 50% 0 50%);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.containerBoxLBT {
width: 100%;
height: 100%;
}
.containerBoxLBT .swiper-button-next::after,
.containerBoxLBT .swiper-button-prev::after {
color: rgba(255, 255, 255, 0.84);
font-size: 24px;
}
.containerBoxLBT .swiper-container {
width: 100%;
height: 100%;
}
.containerBoxLBT .swiper-container .swiper-wrapper {
position: relative;
}
.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide {
overflow: hidden;
}
.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 910px;
background-repeat: no-repeat;
background-size: cover;
}
.swiper-pagination-bullet {
background-color: white;
}
.addAnimationText {
display: inline-block;
clip-path: inset(0 50% 0 50%);
animation: revealText 3s 1 forwards;
}
.addAnimationImg {
animation: imgScale 3s 1 forwards;
}
.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
transform: translateY(-50%) translateX(-50%);
color: white;
text-align: center;
font-weight: bold;
}
.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title :first-child {
font-size: 60px;
letter-spacing: 5px;
}
.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title :last-child {
font-size: 20px;
letter-spacing: 2px;
}
</style>
JS部分(公司有Jquery索性有用了,可以参照着写原生JS)
<script>
// .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title
// 初始化轮播图,具体参数请参考swiper官网 版本号5.4.5
var swiper = new Swiper('.containerBoxLBT .swiper-container', {
// 一次展示几张图
slidesPerView: 1,
// 方向设定
direction: getDirection(),
// 设定切换按钮
navigation: {
nextEl: '.containerBoxLBT .swiper-button-next',
prevEl: '.containerBoxLBT .swiper-button-prev',
},
// 中间指示小点,自定义可参考官方文档
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
observer: true,
on: {
// 初始化,立即执行下面中的代码
init: function() {
let swiperSlide = $('.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide')
$(swiperSlide[0].children[0]).addClass('addAnimationImg')
$(swiperSlide[0].children[1]).addClass('addAnimationText')
$(swiperSlide[0].children[0]).on('animationend',function(){
$(swiperSlide[0].children[0]).removeClass('addAnimationImg')
})
$(swiperSlide[0].children[1]).on('animationend',function(){
$(swiperSlide[0].children[1]).removeClass('addAnimationText')
})
},
resize: function() {
swiper.changeDirection(getDirection());
},
// 监听轮播图切换,可以通过this.activeIndex获取当前活跃的轮播图
slideChange: function() {
let activeIndex = this.activeIndex
let swiperSlide = $('.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide')
$(swiperSlide[activeIndex].children[0]).addClass('addAnimationImg')
$(swiperSlide[activeIndex].children[1]).addClass('addAnimationText')
$(swiperSlide[activeIndex].children[0]).on('animationend',function(){
$(swiperSlide[activeIndex].children[0]).removeClass('addAnimationImg')
})
$(swiperSlide[activeIndex].children[1]).on('animationend',function(){
$(swiperSlide[activeIndex].children[1]).removeClass('addAnimationText')
})
},
}
});
// 轮播图方向设置
function getDirection() {
var windowWidth = window.innerWidth;
var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';
return direction;
}
</script>
动画效果实现,使用了clip-path属性
具体特性可参考MDN