实现效果图
原理
将1~9的数字竖直排版,通过translate移动位置显示不同数字,使用transition控制transform属性有动画效果
技术点
css 属性 writing-mode: vertical-lr,使数字竖直排版
移动 transform: translate(-50%, -40%); y值控制移动至哪个数字
transition 控制transform属性有动画效果
实现代码(注释比较详细,不再赘述)
<!--
* @Author: mat
* @Date: 2019-12-04 14:56:07
* @LastEditTime: 2019-
2022-03-15 08:53:56
51KB
vue
动态
1