倒计时翻牌器动画实现

实现上方翻牌动画

    <div class="clock" id="clock"><!-- front: 表示位于前面的纸牌   back: 表示位于后面的纸牌 --><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div><em>:</em><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div><em>:</em><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div><div class="flip down"><div class="digital front number0"></div><div class="digital back number1"></div></div></div>

4个小纸片，分别是：
前上：.digital.front:before
前下：.digital.front:after
后上：.digital.back:before
后下：.digital.back:after

.single-demo {margin: 50px auto;padding: 30px;width: 600px;text-align: center;border: solid 1px #999;
}.flip {display: inline-block;position: relative;width: 60px;height: 100px;line-height: 100px;border: solid 1px #000;border-radius: 10px;background: #fff;font-size: 66px;color: #fff;box-shadow: 0 0 6px rgba(0, 0, 0, .5);text-align: center;font-family: "Helvetica Neue"
}.flip .digital:before,
.flip .digital:after {content: "";position: absolute;left: 0;right: 0;background: #000;overflow: hidden;box-sizing: border-box;/*中间添加一条水平折线*/
}/* 上半部分 */
.flip .digital:before {top: 0;bottom: 50%;border-radius: 10px 10px 0 0;border-bottom: solid 1px #666; /*中间添加一条水平折线*/
}/* 下半部分 */
.flip .digital:after {top: 50%;bottom: 0;border-radius: 0 0 10px 10px;line-height: 0; /*下半部分对着最上方对齐*/
}/*向下翻start*/
.flip.down .front:before {z-index: 3;/*处于最上层*/
}.flip.down .back:after {z-index: 2;/*处于第二层*/transform-origin: 50% 0%;/*折叠起来(竖起来的背面部分) 看动图*/transform: perspective(160px) rotateX(180deg);
}.flip.down .front:after,
.flip.down .back:before {z-index: 1;
}.flip.down.go .front:before {transform-origin: 50% 100%;animation: frontFlipDown 0.6s ease-in-out both;box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);backface-visibility: hidden;/*backface-visibility表示元素的背面是否可见，默认为visible(可见)。这里的需求是，当前面上半部纸片翻转到一半的时候(90度)进入不可见状态。而纸牌翻转90度以后，正好是显露元素背面的开始，所以将backface-visibility设置为hidden即可完美解决！*/
}.flip.down.go .back:after {animation: backFlipDown 0.6s ease-in-out both;
}
/*向下翻end*//*向上翻start*/
.flip.up .front:after {z-index: 3;
}.flip.up .back:before {z-index: 2;transform-origin: 50% 100%;transform: perspective(160px) rotateX(-180deg);
}.flip.up .front:before,
.flip.up .back:after {z-index: 1;
}.flip.up.go .front:after {transform-origin: 50% 0;animation: frontFlipUp 0.6s ease-in-out both;box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);backface-visibility: hidden;
}.flip.up.go .back:before {animation: backFlipUp 0.6s ease-in-out both;
}
/*向上翻end*//* 向下翻动画 从上往下翻 */
@keyframes frontFlipDown {0% {transform: perspective(160px) rotateX(0deg);}100% {transform: perspective(160px) rotateX(-180deg);}
}@keyframes backFlipDown {0% {transform: perspective(160px) rotateX(180deg);}100% {transform: perspective(160px) rotateX(0deg);}
}/* 向上翻动画 */@keyframes frontFlipUp {0% {transform: perspective(160px) rotateX(0deg);}100% {transform: perspective(160px) rotateX(180deg);}
}@keyframes backFlipUp {0% {transform: perspective(160px) rotateX(-180deg);}100% {transform: perspective(160px) rotateX(0deg);}
}/*填充数字*/
.flip .number0:before,
.flip .number0:after {content: "0";
}.flip .number1:before,
.flip .number1:after {content: "1";
}.flip .number2:before,
.flip .number2:after {content: "2";
}.flip .number3:before,
.flip .number3:after {content: "3";
}.flip .number4:before,
.flip .number4:after {content: "4";
}.flip .number5:before,
.flip .number5:after {content: "5";
}.flip .number6:before,
.flip .number6:after {content: "6";
}.flip .number7:before,
.flip .number7:after {content: "7";
}.flip .number8:before,
.flip .number8:after {content: "8";
}.flip .number9:before,
.flip .number9:after {content: "9";
}.clock {text-align: center;margin-bottom: 200px;
}.clock em {display: inline-block;line-height: 102px;font-size: 66px;font-style: normal;vertical-align: top;
}

根据图理解 z-index的设置

        // 时钟翻牌function Flipper(config) {// 默认配置this.config = {// 时钟模块的节点node: null,// 初始前牌文字frontText: 'number0',// 初始后牌文字backText: 'number1',// 翻转动画时间（毫秒，与翻转动画CSS 设置的animation-duration时间要一致）duration: 600}// 节点的原本class，与html对应，方便后面添加/删除新的classthis.nodeClass = {flip: 'flip',front: 'digital front',back: 'digital back'}// 覆盖默认配置Object.assign(this.config, config)// 定位前后两个牌的DOM节点this.frontNode = this.config.node.querySelector('.front')this.backNode = this.config.node.querySelector('.back')// 是否处于翻牌动画过程中（防止动画未完成就进入下一次翻牌）this.isFlipping = false// 初始化this._init()}Flipper.prototype = {constructor: Flipper,// 初始化_init: function () {// 设置初始牌面字符this._setFront(this.config.frontText)this._setBack(this.config.backText)},// 设置前牌文字_setFront: function (className) {this.frontNode.setAttribute('class', this.nodeClass.front + ' ' + className)},// 设置后牌文字_setBack: function (className) {this.backNode.setAttribute('class', this.nodeClass.back + ' ' + className)},_flip: function (type, front, back) {// 如果处于翻转中，则不执行if (this.isFlipping) {return false}// 设置翻转状态为truethis.isFlipping = true// 设置前牌文字this._setFront(front)// 设置后牌文字this._setBack(back)// 根据传递过来的type设置翻转方向let flipClass = this.nodeClass.flip;if (type === 'down') {flipClass += ' down'} else {flipClass += ' up'}// 添加翻转方向和执行动画的class，执行翻转动画this.config.node.setAttribute('class', flipClass + ' go')// 根据设置的动画时间，在动画结束后，还原class并更新前牌文字setTimeout(() => {// 还原classthis.config.node.setAttribute('class', flipClass)// 设置翻转状态为falsethis.isFlipping = false// 将前牌文字设置为当前新的数字，后牌因为被前牌挡住了，就不用设置了。this._setFront(back)}, this.config.duration)},// 下翻牌flipDown: function (front, back) {this._flip('down', front, back)},// 上翻牌flipUp: function (front, back) {this._flip('up', front, back)}}// 定位时钟模块let clock = document.getElementById('clock')// 定位6个翻板let flips = clock.querySelectorAll('.flip')// 获取当前时间let now = new Date()// 格式化当前时间，例如现在是20:30:10，则输出"203010"字符串let nowTimeStr = formatDate(now, 'hhiiss')// 格式化下一秒的时间let nextTimeStr = formatDate(new Date(now.getTime() + 1000), 'hhiiss')// 定义牌板数组，用来存储6个Flipper翻板对象let flipObjs = []for (let i = 0; i < flips.length; i++) {// 创建6个Flipper实例，并初始化flipObjs.push(new Flipper({// 每个flipper实例按数组顺序与翻板DOM的顺序一一对应node: flips[i],// 按数组顺序取时间字符串对应位置的数字frontText: 'number' + nowTimeStr[i],backText: 'number' + nextTimeStr[i]}))}// 开始计时setInterval(function () {// 获取当前时间let now = new Date()let nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss')let nextTimeStr = formatDate(now, 'hhiiss')for (let i = 0; i < flipObjs.length; i++) {if (nowTimeStr[i] === nextTimeStr[i]) {continue}flipObjs[i].flipDown('number' + nowTimeStr[i], 'number' + nextTimeStr[i])}}, 1000)//正则格式化日期function formatDate(date, dateFormat) {/* 单独格式化年份，根据y的字符数量输出年份* 例如：yyyy => 2019yy => 19y => 9*/if (/(y+)/.test(dateFormat)) {dateFormat = dateFormat.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));}// 格式化月、日、时、分、秒let o = {'m+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'i+': date.getMinutes(),'s+': date.getSeconds()};for (let k in o) {if (new RegExp(`(${k})`).test(dateFormat)) {// 取出对应的值let str = o[k] + '';/* 根据设置的格式，输出对应的字符* 例如: 早上8时，hh => 08，h => 8* 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方* 例如: 下午15时，hh => 15, h => 15*/dateFormat = dateFormat.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));}}return dateFormat;};//日期时间补零function padLeftZero(str) {return ('00' + str).substr(str.length);}

参考https://blog.csdn.net/weixin_33552698/article/details/117829986 理解实现。

倒计时翻牌器动画实现相关推荐

Vue-数字滚动和翻牌器
1.数字滚动vue-count-to (1)安装: npm install vue-count-to (2)使用: <template><div><h2>数字滚动动 ...
大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
封装一个layui组件---js实现数字翻牌器效果
封装一个layui组件-js实现数字翻牌器效果 layui.define(["jquery"], function (exports) {var $ = layui.jquery; ...
FCPX插件-20个简洁实用数字倒计时计数器提示动画 mCounter
mCounter是一款适用于Final Cut Pro X的数字倒计时计数器提示动画插件,它提供了20种简洁实用的数字倒计时计数器提示动画,可以帮助用户更方便地制作倒计时和计数器相关的视频内容. mC ...
大数据可视化——dataV，Echarts，蚂蚁金服L7世界地图引入，数字翻牌器，全屏，自定义排名轮播表
目录 L7相关概念构造函数Scene PointLayer 基本用法 shape 类型 style tips 地图事件 Popup信息框 option 方法:setLnglat 方法:setDOMC ...
【前端3分钟】写一个数字翻牌器
在做效果的时候,想要表现一个数字数据的动态变化,例如金额增加,此时我们就可以使用数字翻牌器来表现.当然,你也可以使用其他效果来表现. 下面我们就来实现,注意一点: 数字的增加 <!DOCTYPE ...
大数据可视化——在组件中使用翻牌器
这一节主要说一下如何复用翻牌器效果如下: $parent this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法,methods里的方法 }! setTim ...
Vue大屏实战一：数字翻牌器的实现
文章目录 1.效果预览 2.数字翻牌器的实现 3.vue项目中引入DataV 4.大屏顶部翻牌器布局 5.大屏数字翻牌器样式 6.大屏数字翻牌器逻辑实现 1.效果预览页面整体效果如下顶部的数字翻牌 ...

倒计时翻牌器动画实现

倒计时翻牌器动画实现相关推荐

最新文章

热门文章