这是一款随页面滚动"吐出"购物小票的打印动效，核心是 CSS 滚动驱动动画（animation-timeline: scroll()），配合少量原生 JS 生成数据。往下滚，纸条就从打印机口一段一段推出来，商品明细、合计金额和条码依次显现；滚到底会浮出按钮，点一下小票"撕断"飞走，随即换一张全新的。打印机指示灯闪烁、纸张边缘做成锯齿状，细节还原得相当到位。

这款小票打印动效的四个亮点

动画进度完全由滚动条控制，没有 scroll 监听、没有定时器，跟手且不掉帧。
逐格步进而非匀速滑动，还原了针式打印机走纸的顿挫感。
数据随机生成：商品清单随机抽取，数量、合计金额与条码同步重算，每张都不一样。
做了降级提示，浏览器不支持时会明确告知，而不是默默不动。

animation-timeline 滚动驱动动画的几处巧思

其一，滚动条被直接当成了动画进度条。纸条位移绑定在一个自定义属性上，而这个属性用 @property 注册过类型，因此百分比可以被平滑插值；再把动画时间轴指向根滚动容器，滚动即播放：

animation-timeline: scroll(root);

真正让它"像打印机"的是缓动函数用了 steps()——把连续的滚动切成几十格，纸才会一格一格往外顿，而不是丝滑地滑出来。这一处是整个效果的灵魂，格数在源码里是可调变量。

其二，同一个元素上混用了两条时间轴。底部提示箭头既要一直上下跳（跟时间走），又要在滚到底时淡出（跟滚动走）。源码用逗号为两个动画分别指定时间轴，并限定后者只在滚动的最后一段区间生效，纯 CSS 就让两件事互不干扰。

其三，条码是画出来的，不是图片。粗细不等的黑白条纹由渐变实时拼接生成，每换一张小票就重算一次，因此不需要任何图片资源，放大也不糊。

怎么换成自己的商品与店铺信息

商品清单是脚本顶部的一个数组，改名字和价格即可，条数随意；单张小票的商品数量上下限也是两个常量。店名、地址、表头与页脚致谢语都在 HTML 里明文写着，直接改就行。

样式表顶部集中了纸张底色、纸宽、打印机尺寸等变量，步进格数与最大吐纸长度也在其中，源码均有注释说明用途；页面的可滚动长度决定了小票能有多长，同样是一个变量。整体没有构建步骤，下载解压即可运行。

兼容提示：滚动驱动动画属于较新的 CSS 特性，Chrome / Edge 115+ 与 Safari 26+ 支持良好，Firefox 需手动开启标志位。素材已用 @supports 做了检测，不支持的浏览器会给出提示并退回静态显示，不会白屏。本素材双击即可打开，如遇显示异常请参见压缩包内的帮助文档。

关于这款滚动打印特效的常见问题

Firefox 里没有动画是怎么回事？

Firefox 目前尚未默认开启滚动驱动动画。素材已内置特性检测，在不支持的浏览器里会给出提示并退回静态显示，不会白屏或报错。若面向的用户群以 Firefox 为主，建议先评估再使用。

小票可以更长、商品更多吗？

可以。单张小票的商品数量由两个常量控制，纸条能吐出多长则取决于页面的可滚动高度，两者都是样式表和脚本里的独立变量，调大即可。

商品数据能对接后台吗？

能。商品清单是一个普通数组，把它换成接口返回的数据、再调用一次生成函数即可，动画部分是纯 CSS，不受数据来源影响。

滚动的顿挫感能调节吗？

能。步进格数是一个变量，调小顿挫更明显、更像针式打印机，调大则接近匀速滑出，可按品牌调性自行取舍。

适用场景

适合电商结算页与订单确认页的趣味化改造、超市与零售品牌的创意落地页、前端技术演示与教学案例，也常被用作个人作品集里的交互彩蛋。源码可下载后直接查看完整实现。