swiper的这种效果怎么实现?

swiper的这种效果怎么实现?

或者不使用swiper的其他方式怎么实现?


回答:

除开简单的轮播实现,焦点切换效果就是使用 transform:scale() 来实现缩放,搭配 transition 来实现补间效果。

如果简单的用CSS来实现的话,就是默认缩放(transform:scale(0.8)),当前激活卡片取消缩放(transform:scale(1))。但是这样的话,就只有一个缩放效果。和问题中的GIF会差一点。

如果可以使用JS的话,原理也是一样的,可以通过当前激活的下标来给激活卡片的前1后1做不一样的缩放比例。

横向循环焦点图片展示 - Swiper中文网
swiper的这种效果怎么实现?

transform - CSS:层叠样式表 | MDN
transition - CSS:层叠样式表 | MDN


回答:

可以参考这两个,也可以在这里找找其他的
https://www.jq22.com/jquery-info22691
https://www.jq22.com/jquery-info24031


回答:

https://swiperjs.com/demos

以上是 swiper的这种效果怎么实现? 的全部内容, 来源链接: utcz.com/p/935007.html

回到顶部