css3翻牌翻数字效果怎么实现-创新互联
这篇文章将为大家详细讲解有关css3翻牌翻数字效果怎么实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司服务项目包括讷河网站建设、讷河网站制作、讷河网页制作以及讷河网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,讷河网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到讷河省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!效果图如下:
没有具体说做什么效果,但是想着纯数字转换太简单了,然后就顺手做了一个翻牌的效果。
效果预览,新窗口打开:https://codepen.io/andy-js/pen/ExaGxaL
首先做一些页面布局:
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)移动到另一个数字的后面,这样翻转过来就能看到镜像的数字
不是很完善,还有很多可以改进的地方
全部代码如下:
关于“css3翻牌翻数字效果怎么实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网页题目:css3翻牌翻数字效果怎么实现-创新互联
文章地址:http://ybzwz.com/article/ceiddd.html