swiper的这种效果怎么实现？-灵析社区

爬虫爬呀爬

除开简单的轮播实现，焦点切换效果就是使用 "transform:scale()" 来实现缩放，搭配 "transition" 来实现补间效果。 如果简单的用CSS来实现的话，就是默认缩放（"transform:scale(0.8)"），当前激活卡片取消缩放（"transform:scale(1)"）。但是这样的话，就只有一个缩放效果。和问题中的GIF会差一点。 如果可以使用JS的话，原理也是一样的，可以通过当前激活的下标来给激活卡片的前1后1做不一样的缩放比例。 "横向循环焦点图片展示 -Swiper中文网" (https://link.segmentfault.com/?enc=LaRm3WAXUvpvyG2mlpwPcQ%3D%3D.o4DA5XKIZS3yCQWtuBmA5bpNA6VuhoVVN0hm6bfjeuShxXS8Sox33tZzcymEO3ES) "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241214/c82fbe2eb9c4ad1861cde940c75fc7f3.png) "transform - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=VOqbK251GeTUC0Sb1pkYdQ%3D%3D.EmL%2FKosNrTmJFbwpD%2FWlXdMH8UPKDvyJlI%2Bexsn294neE24QJe9lJCjpoyI5DB8qent6d4jti%2BCnLQj1HwV7zg%3D%3D) "transition - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=p83BjRB76tqigKEBgcwZ5Q%3D%3D.OVSa5gKh3uw7wrcHpWxHC%2FHRHDDyysDNZ9M2y52sA921WIWxInnbQNnLfEEsskDs9regQuVLPHy9raCp%2FRrlOg%3D%3D)