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五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 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生成静态页面的简单示例
2014/04/17 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Python的动态重新封装的教程
2015/04/11 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python实现BackPropagation算法
2017/12/14 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
运动会四百米广播稿
2014/01/19 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
会计工作态度自我评价
2015/03/06 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python