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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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判断变量类型常用方法
2012/04/24 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python+django实现简单的文件上传
2016/08/17 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
教育科学研究生自荐信
2013/10/09 职场文书
升职自荐书范文
2013/11/28 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
远程培训的心得体会
2014/09/01 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
教师师德师风整改措施
2014/10/24 职场文书
优秀班组申报材料
2014/12/25 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python