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 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
分析Python读取文件时的路径问题
2018/02/11 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python sorted函数原理解析及练习
2020/02/10 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
企业治理工作自我评价
2013/09/26 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
社会学专业求职信
2014/02/24 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
街道社区活动报告
2015/02/05 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Python编写nmap扫描工具
2021/07/21 Python