本文由云+社区发表

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

先上效果:

demo地址:https://kiroroyoyo.github.io/cardTransform/index.html

实现过程

1. 结构与样式

结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。

样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。

a. 前排(cardFrond)相对于视口的初始位置(left:-255.5%

最新文章

  1. Prime Time使用
  2. BPM业务流程管理与SAP如何更好集成整合?
  3. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
  4. 学习OpenCV——绘制彩色直方图(HSV2BGR)
  5. hihoCoder 1385 : A Simple Job(简单工作)
  6. Free download
  7. Java [Leetcode 232]Implement Queue using Stacks
  8. centos安装memcache与telnet
  9. the c programming language 2-3
  10. alpha属性设置
  11. NGINX中的proxy_pass和rewrite
  12. 《Linux命令行与shell脚本编程大全》第十六章 控制脚本
  13. 从 HelloWorld 看 Java 字节码文件结构
  14. java的抽象方法为什么不能是static、final、private?
  15. 使用 IntraWeb (30) - TIWAppInfo、TIWMimeTypes、TIWAppCache
  16. xxx污水厂监控网络定点图
  17. Jetpack 架构组件 Lifecycle 生命周期 MD
  18. 图解zookeeper FastLeader选举算法【转】
  19. 文本框改变之onpropertychange事件
  20. 【SSH框架】之Struts2系列(一)

热门文章

  1. -1.记libgdx初次接触
  2. 学习Acegi应用到实际项目中(12)- Run-As认证服务
  3. centos7下安装mysql会遇到的问题集合
  4. c刷题
  5. CSS3——animation的基础(轮播图)
  6. Node.js中实现套接字服务
  7. curl安装和使用
  8. tomcat服务器怎样远程调试
  9. shiro与项目集成开发
  10. nodejs异步请求重试策略总结