上传者: 38741101
|
上传时间: 2022-03-15 08:53:56
|
文件大小: 51KB
|
文件类型: -
实现效果图
原理
将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-