本文由云+社区发表
最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。
先上效果:
demo地址:https://kiroroyoyo.github.io/cardTransform/index.html
实现过程
1. 结构与样式
结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。
样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。
a. 前排(cardFrond)相对于视口的初始位置(left:-255.5%