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

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

 41027  406  查看评论 (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,并将标记重新渲染为一个新数字。


相关插件-动画效果

jQuery数据滚动

当页页滚动到一定位置时,数值自动增加动态效果
  动画效果
 46757  505

图标点击反馈特效

HTML5 CSS3 SVG 制作的图标点击反馈特效,点击出现波纹、飞溅、滴水、loading等效果
  动画效果
 43671  587

超级牛B的js效果

跟上一个心的形状用的类似的方法。不用我多说,看了就知道有多牛B了哦。可兼容手机。暂停之后一个手指拖动改变视角,两个手指可以调整视角的大小,三个手指可以移动。
  动画效果
 58764  331
  动画效果
 27967  324

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复