repeating-linear-gradient条纹必须首尾相接，如#f00 0px, #f00 10px, #00f 10px, #00f 20px；background-size需等于重复单元尺寸，动画终点设为像素值而非100%；进度控制靠外层裁剪宽度实现，兼容性需降级处理。
repeating-linear-gradient 条纹写法必须首尾相接
常见错误是写成 repeating-linear-gradient(45deg, #f00 0px, #f00 10px, #00f 0px, #00f 10px)，第二段从 0px 开始，直接覆盖第一段，结果只剩纯蓝。真正能平铺出条纹的写法，必须让相邻色块“硬切”：前一段终点 = 后一段起点。
-
#f00 0px, #f00 10px, #00f 10px, #00f 20px→ 红 0–10px，蓝 10–20px，无缝拼接 - 用百分比更稳妥：
#f00 0%, #f00 50%, #00f 50%, #00f 100%，适配缩放和高 DPR 屏 - 角度选
45deg或135deg，90deg容易被当成纯色块，5deg在窄容器里看不出条纹感
background-size 和 background-position 必须匹配周期
动画要流畅，background-size 必须等于渐变中一个完整重复单元的尺寸。比如条纹定义是 red 0px → red 10px → blue 10px → blue 20px，那周期就是 20px，background-size 就得设成 20px 100%，否则动画到衔接处会撕裂或跳帧。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 动画终点值设为
20px（即一个周期），不是100%—— 后者在 Safari 和部分安卓 WebView 里因小数精度导致卡顿 - 只改
background-position，别碰transform或left，否则条纹连续性断裂 - 若容器高度不固定，
background-size的第二个值建议写100%，避免垂直方向拉伸失真
分段进度控制靠 width + overflow hidden 实现
repeating-linear-gradient 本身不感知进度，它只是装饰层。真实分段靠外层容器裁剪宽度，而不是靠动画帧控制百分比。
- 结构推荐：外层
div设固定高、overflow: hidden；内层两个div叠放——底层填色表示已完成，上层带条纹表示加载中 - 上层条纹
div的width绑定当前进度（如37%），同时保持background-position持续动画 - 别给条纹层加
transition: width，它和animation冲突，宽度变化应瞬时生效
Safari 和 IE 兼容性要单独处理
老版 Safari 对 90deg 支持不稳定，IE10–11 完全不支持 repeating-linear-gradient，必须降级。
- Safari 建议改用
to right或to bottom替代角度值 - IE 降级方案：
linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 10px, #ffffff 10px, #ffffff 20px)+background-size: 20px 20px - 透明度别用
#f008这类缩写，Safari 旧版解析失败，改用rgba(255, 0, 0, 0.5)
min-height），再确认 DPR 下 px 单位是否被渲染模糊——这时候百分比停靠点 + 合理的 background-size 就不是可选项，而是必选项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
