倒计时翻牌器动画实现

最新推荐文章于 2023-11-15 17:36:46 发布
最新推荐文章于 2023-11-15 17:36:46 发布
阅读量577 收藏 5
点赞数 3
文章标签： css3 css 动画
原文链接：https://blog.csdn.net/weixin_33552698/article/details/117829986
版权

在这里插入图片描述
实现上方翻牌动画

    <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对应，方便后面添加/删除新的class
            this.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
                }
                // 设置翻转状态为true
                this.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(() => {
                    // 还原class
                    this.config.node.setAttribute('class', flipClass)
                    // 设置翻转状态为false
                    this.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 => 2019
                    yy => 19
                    y => 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 理解实现。

想要成仙的菜鸟前端
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery翻牌倒计时效果demo
05-23
jQuery翻牌倒计时效果demo
js实现倒计时效果
RUBGH的博客
10-25 149
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>doc</title> <style> div{ margin: 200px; } span{ display: inline-block; w
html时钟翻牌效果,干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
weixin_33552698的博客
06-04 1608
双十一剁手节过去了，大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多比较复杂，用了4个并列的标签来放置前后两个“牌”。本文就来讲解下，如何进一步精简HTML，让结构简单，让JS方法封装得易使用。先来看看最终效果：每个翻牌的HTML结构(精简至2个并列标签)：复制代码本次分享含有很多小技巧，灵活使用...
jquery翻牌倒计时
01-19
jquery翻牌倒计时
js 实现时间的翻牌效果
koobee_1的专栏
12-30 949
Clock .clock { overflow:hidden; float:left; -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; -o-perspective:1000px; perspective:1000px; -webkit-transform-st
WPF实现3D翻牌式倒计时特效
09-07
总的来说，实现WPF的3D翻牌式倒计时特效需要对WPF的自定义控件、动画系统、数据绑定以及计时器有深入的理解。通过巧妙地组合这些技术，我们可以创建出既美观又动态的用户体验。在实际开发过程中，还可以根据需要添加...
jquery.countdown倒计时插件下载_翻牌倒计时器特效
11-10
jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效
24小时倒计时翻牌动画特效.rar
10-01
标题中的“24小时倒计时翻牌动画特效.rar”表明这是一个关于网页倒计时功能的特效，使用了翻牌的视觉效果。这种特效通常在网站活动、竞赛或产品发布等场景中用到，以吸引用户注意力并制造紧张感。翻牌动画能够逐个...
倒计时之翻牌篇
weixin_44955769的博客
09-15 500
话不多说看图 使用组件 // 这里面的参数就是你要倒计时结束的时间 <TheCountdown :deadline="'2020-10-05 23:59:59'"></TheCountdown> 组件 直接拿走 调用就行 <template> <div class=" flip-clock" style="min-width:30rem;"> <template v-for="data in timeData" v-show="show
简单倒计时效果实现
weixin_44950875的博客
01-07 437
简单倒计时效果的实现
数字翻牌效果JS实现，高端大气的数字翻拍效果实现
04-28
包含展示所需要的js文件，打开文件或部署到开发工具或服务器中访问页面即可
cocos creator 搓牌动画 翻牌动画 使用版本是 cocos creator 3.1.0
qiti01的博客
05-31 1172
注释详细。代码量少。因为是遮罩实现的所以容易按自己要求修改代码。
CSS打造复古时钟-翻牌计时
liuhao9999的博客
07-07 727
CSS打造复古时钟-翻牌计时
翻牌器特效--vue3 封装组件
最新发布
m0_72929120的博客
11-15 879
【代码】翻牌器特效--vue3 封装组件。
html翻牌动画效果,css实现旋转翻牌动画效果
weixin_35075144的博客
06-03 828
css动画之旋转翻牌效果，具体内容如下所示：1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置例子如下：.box {height: 300px;width: 300px;position: relative;}.zh,.fan {height: 300px;width: 300px;line-height: 300px;font-size: 30px;text-align...
分享75个JS特效倒计时，总有一款适合您
zy0412326的专栏
02-06 920
js
html时钟翻牌效果,flipTimer – jQuery时钟翻牌效果插件
weixin_33040687的博客
06-04 1108
flipTimer – jQuery时钟翻牌效果插件分类：代码日期：2016-08-02点击(36,333)下载(1)来源：未知收藏简介时钟翻牌效果常出现在天气软件的桌面插件上，HTC 著名的 Sense UI 也曾经使用了这种效果。虽然近两年更少见了，但它不失为一种经典的 UI，如果你仍然喜欢这种效果，不妨使用 flipTimer 这个 jQuery 插件来制作吧。flipTimer 除了可以制...
有趣的HTML实例（六） 卡片翻转时钟
好好读书
02-10 2029
有趣的HTML实例（四） 卡片翻转时钟 一款简单的 HTML+CSS+JS 原生 卡片翻转时钟（css+js）实例 1、HTML 2、CSS 3、JS 4、舒适的画面感，代码效果 5、翻页时钟
实现时钟翻牌器倒计时效果
06-02
好的，你可以使用 HTML、CSS 和 JavaScript 实现时钟翻牌器倒计时...我们使用 CSS 的 3D 转换效果来实现翻牌器的动画效果。在 JavaScript 中，我们使用 `setInterval` 函数来更新翻牌器的值，并将其格式化为两位数字。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值