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中的calc()功能
Jul 14 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
将HTML自动转为JS代码
2006/06/26 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pip安装python库的方法总结
2019/08/02 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
住房公积金接收函
2014/01/09 职场文书
医院实习介绍信
2014/01/12 职场文书
5.1手机促销活动
2014/01/17 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
公司欠款证明
2015/06/24 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL