好资源导航 » 文章资讯 » vue实现数字动态翻牌的效果（开箱即用）

vue实现数字动态翻牌的效果（开箱即用）

2023-08-04 21:04:04 90

实现效果图

原理

将1~9的数字竖直排版，通过translate移动位置显示不同数字，使用transition控制transform属性有动画效果

技术点

css属性writing-mode:vertical-lr，使数字竖直排版

移动 transform:translate(-50%,-40%);y值控制移动至哪个数字

transition 控制transform属性有动画效果

实现代码（注释比较详细，不再赘述）





/*订单总量滚动数字设置*/
.box-item{
position:relative;
height:100px;
font-size:54px;
line-height:41px;
text-align:center;
list-style:none;
color:#2D7CFF;
writing-mode:vertical-lr;
text-orientation:upright;
/*文字禁止编辑*/
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
/*overflow:hidden;*/
}
/*默认逗号设置*/
.mark-item{
width:10px;
height:100px;
margin-right:5px;
line-height:10px;
font-size:48px;
position:relative;
&>span{
position:absolute;
width:100%;
bottom:0;
writing-mode:vertical-rl;
text-orientation:upright;
}
}
/*滚动数字设置*/
.number-item{
width:41px;
height:75px;
/*背景图片*/
background:url(/images/text-bg-blue.png)no-repeatcentercenter;
background-size:100%100%;
//background:#ccc;
list-style:none;
margin-right:5px;
//background:rgba(250,250,250,1);
border-radius:4px;
border:1pxsolidrgba(221,221,221,1);
&>span{
position:relative;
display:inline-block;
margin-right:10px;
width:100%;
height:100%;
writing-mode:vertical-rl;
text-orientation:upright;
overflow:hidden;
&>i{
font-style:normal;
position:absolute;
top:11px;
left:50%;
transform:translate(-50%,0);
transition:transform1sease-in-out;
letter-spacing:10px;
}
}
}
.number-item:last-child{
margin-right:0;
}

数字背景图片

总结

以上所述是小编给大家介绍的vue实现数字动态翻牌的效果（开箱即用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue实现数字动态翻牌的效果（开箱即用）

热门推荐

随机推荐