css3翻牌翻数字的示例代码


Posted in HTML / CSS onFebruary 07, 2020

今天接到公司一任务,效果图如下:

css3翻牌翻数字的示例代码

没有具体说做什么效果,但是想着纯数字转换太简单了,然后就顺手做了一个翻牌的效果。

css3翻牌翻数字的示例代码

效果预览,新窗口打开:https://codepen.io/andy-js/pen/ExaGxaL

首先做一些页面布局:

<ul></ul>
body{background: #000;}
     ul{
         list-style: none;
         margin:100px 0;
         display: flex;
         justify-content:center;
         line-height: 56px;
         height:56px;
         font-size: 39.6px;
         color: #FFFFFF;
         transform-style:preserve-3d;
         perspective:1000px;
     }
     li{
        height:56px;
        margin:0 10px;
        background:none;
        width:16px;
        position: relative;
     }
     .num{
        width:46px;
        transform-style:preserve-3d;
        perspective:1000px;
        transform:rotateY(0deg);
        transition: 1s all ease;
    }
    p{
        height:56px;
        width:46px;
        text-align: center;
        background: #EC2C5C;
        border-radius: 2.57px;
        position: absolute;
    }
    
    p:nth-child(2){
        transform: scalex(-1) translateZ(-1px);
    }

然后通过动态插入,模拟了这么一个效果
利用了transition来做的动画
利用transform:rotateY来做的翻转
在翻转之前先将另一个数字scalex左右镜像之后translateZ(-1px)移动到另一个数字的后面,这样翻转过来就能看到镜像的数字
不是很完善,还有很多可以改进的地方
全部代码如下:

<script>
var number=9999993,
    numArr=addComma(number),
    aNum=[],
    oUl=document.getElementsByTagName('ul')[0];
for(let i=0;i<numArr.length;i++){
    let li=document.createElement('li');
    oUl.appendChild(li);
    if(numArr[i]==',')
    li.innerHTML=',';
    else
    li.innerHTML='<p>'+numArr[i]+'</p><p></p>',
    li.className='num',
    li.deg=0,
    aNum.push(li);
};

setInterval(function(){
    let changeNum=number+1+'';
    let changeArr=addComma(changeNum),
        difference=changeArr.length-numArr.length;
    if(difference){
        for(let i=0;i<difference;i++){
            let li=document.createElement('li');
            oUl.insertBefore(li,oUl.children[0]);
            if(changeArr[i]==',')
            li.innerHTML=',';
            else
            li.innerHTML='<p>'+changeArr[i]+'</p><p></p>',
            li.className='num',
            li.deg=0,
            aNum.unshift(li);
        };
    };
    number+='';
    for(let i=changeNum.length-number.length;i<changeNum.length;i++){
        if(changeNum[i]==number[i])continue;
        let deg=aNum[i].deg;
        aNum[i].deg=deg=deg+180;
        let index=(deg/180)%2;
        aNum[i].children[index].innerHTML=changeNum[i];
        aNum[i].style.transform='rotateY('+deg+'deg)';
    };
    number=Number(changeNum);
    numArr=changeArr;
},2000);


function addComma(num){    //每隔三位数加一个豆号
    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 #HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 #HTML / CSS
You might like
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php解决约瑟夫环示例
2014/04/09 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
护士自荐信
2013/10/25 职场文书
yy婚礼主持词
2014/03/14 职场文书
安全承诺书格式
2014/05/21 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
学校国庆节活动总结
2015/03/23 职场文书
端午节寄语2015
2015/03/23 职场文书
导游词之井冈山
2019/11/20 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python