效果图：

描述说明：

这是一款效果非常炫酷的jQuery和CSS3 3D翻牌式倒计数特效。这个特效就像NBA比赛的记分牌一样，可以像翻牌一样上下翻动当前的记分牌。

简要教程

这是一款效果非常炫酷的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，并将标记重新渲染为一个新数字。

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/600.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意