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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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 500报错的快速解决方法
2016/12/14 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
javascript实现评分功能
2020/06/24 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python RSA加密的示例
2020/12/09 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
汽车专业毕业生自荐信
2013/11/03 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
出国留学单位推荐信
2015/03/26 职场文书
戒赌保证书
2015/05/11 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android