CSS如何制作数字滚动效果_利用transform位移数字

数字滚动本质是通过transform: translateY()位移切换预排数字非3D动画需等宽字体、overflow: hidden、CSS自定义属性配合calc()与cubic-bezier过渡实现平滑效果。数字滚动效果的本质是位移切换不是动画插值数字滚动效果看着像“数字在滚轮里翻转”实际几乎全是用 transform: translateY() 把一串预排好的数字上下位移实现的。浏览器不渲染真实 3D 翻转因为成本高、兼容性差、字体对齐难。你看到的“滚动”其实是把 0 到 9 垂直堆成一列再通过改变容器的 transform 值让对应数字“滑”到可视区中心。必须用固定等宽字体如 font-family: monospace 或 SF Mono, Consolas否则数字上下错位每个数字高度要严格一致推荐用 line-height: 1 height 显式设为单行高容器需设 overflow: hidden否则滚动时看到多余数字溢出用 CSS 自定义属性 transition 实现平滑滚动核心思路用一个 --digit 自定义属性控制当前显示数字CSS 用 calc() 算出对应位移值配合 transition 实现缓动。不依赖 JS 动画帧更轻量、更易同步多个数字。--digit 值应为 0–9 的整数JS 只需更新这个属性el.style.setProperty(--digit, 7)位移公式固定为transform: translateY(calc(var(--digit) * -100%))前提是每个数字占容器 100% 高度必须加 transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1)默认 ease 在数字切换时有明显“顿挫”IE 不支持 calc() 里用自定义属性如需兼容 IE得退回到 JS 控制 style.transform多个数字联动时避免小数位移导致的模糊当同时滚动年份4 位、时间6 位这类多位数字时如果每位都独立用 % 单位位移小数像素会累积导致文字发虚或闪烁。强制启用硬件加速transform: translateZ(0) 或 will-change: transform仅对频繁变化的元素所有数字容器统一用 font-size 整数值如 24px不用 1.5rem避免缩放引入小数位移值改用 px 更稳妥若单个数字高 32px则写 transform: translateY(calc(var(--digit) * -32px))Chrome 115 对 subpixel rendering 优化变严若仍模糊可加 -webkit-font-smoothing: antialiasedJS 更新数字时注意异步时机与过渡中断直接连续多次设置 --digit可能因上一次 transition 没结束就被覆盖导致跳变或卡住。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能