通过swiper实现层叠页面效果;

第一次写博客可能丑一点。
原效果图(苹果手机Safari):通过swiper实现层叠页面效果

构思

看到这个效果之后根据自己所掌握的知识量的对比发现好像没有什么插件或者二ui样式有这个效果。
但swiper内有和这个接近的。
于是就用的swiper进行初步构建。
然后通过变形等方式进行调整,再给每个页面上增加一层渐变蒙板。大致的效果就差不多了。

通过swiper实现层叠页面效果
通过swiper实现层叠页面效果

效果图

通过swiper实现层叠页面效果
以上是静态表现。
为了能让它动起来可以更改class。使用 transition 设置过度时间。
然后通过js循环控制页面大小和位置的变化。
我代码写的low就不给你们展示了。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-07-25
  • 2021-12-20
  • 2021-12-03
  • 2021-08-01
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-17
  • 2021-10-21
  • 2021-09-07
  • 2022-12-23
相关资源
相似解决方案