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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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 session劫持和防范的方法
2013/11/12 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python读取csv文件实例解析
2019/12/30 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python气泡提示与标签的实现
2020/04/01 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
毕业设计说明书
2014/05/07 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
Python 全局空间和局部空间
2022/04/06 Python