3 个回答

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

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

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

横向循环焦点图片展示 - Swiper中文网
图片.png

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏