当前位置： 移动技术网 > IT编程>网页制作>CSS > css3翻牌翻数字的示例代码

css3翻牌翻数字的示例代码

2020年06月22日  | 移动技术网IT编程  | 我要评论

狗窝团,9c8553,75.125.41.25

今天接到公司一任务，效果图如下：

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

效果预览，新窗口打开：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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网