jQuery和CSS3超酷3D翻牌式倒计数特效

所属分类:其他-动画效果

 33219  351  查看评论 (3)
分享到微信朋友圈
X
jQuery和CSS3超酷3D翻牌式倒计数特效 ie兼容10

简要教程

这是一款效果非常炫酷的jQuery和CSS3 3D翻牌式倒计数特效。这个特效就像NBA比赛的记分牌一样,可以像翻牌一样上下翻动当前的记分牌。这个特效将牌子从水平中心线分成两半,然后上下两半可以绕中心线做翻转动画,效果非常神奇。

制作方法

HTML结构

这个3D翻牌式倒计数特效由5个部分组成:

  • 一个包裹容器,它的作用是用于倒计数牌子的占位。

  • 两个class为.current的span,这是倒计数的当前数字。两个class为.next的span,这是倒计数的下一个数字。class为top的牌子的高度为包裹容器的一半,使用overflow: hidden将另一半隐藏。

  • class为bottom的两个span也分为"current"和"next"。它们会被顶层的数字掩盖,因此不用剪裁尺寸。

下图说明了这个结构:


这里的小技巧是隐藏下一个数字,并将当前数字相反的部分朝用户的方向进行翻转。

倒计数特效的各个状态

  • Initial:两个当前的卡片(.current)可见,下一个图片(.next)不可见(其中一个在堆叠栈的下面,另一个使用perspective进行隐藏)。

  • Changing:这个状态中会为相应的元素添加class并开始动画。"top current"卡片和"top next"卡片同时做3D翻转(其中一个被添加了延时,使两个动画不同步)。

  • Changed:动画结束后,需要一个稳定的"changed"状态来在重置的过程中使所有的元素保持稳定。如果没有这个状态,在Safari浏览器中会产生不正确的闪动。

  • Reset:移除changing class,并将标记重新渲染为一个新数字。


相关插件-动画效果

HTML5 Canvas粒子效果文字动画特效(酷!)

HTML5 Canvas粒子效果文字动画特效
  动画效果
 108691  1153

cs3旋转动画实现地球周转

css33d效果旋转变形
  动画效果
 32163  371

卷轴动画-html5+js完美兼容IE6+

卷轴动画-html5+js完美兼容IE6+
  动画效果
 43441  421

jQuery延时动画插件aniAuto

该插件主要用于执行Animate.css动画库,可以实现动画延时,队列,执行时间,滞后执行,重复执行等
  动画效果
 27951  333

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    羊咩咩~ 0
    2018/11/29 9:30:47
    这个可以做成可控性吗? 回复
    鲨鱼小熊 0
    2016/12/9 15:12:01
    怎么让它在为0时停止啊 回复
    bjajmd 0
    2016/9/19 10:09:25
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复