用 linear-gradient 可实现烈焰红橙渐变倒计时条：采用 #ff2a00→#ff6b00→#ffa500 垂直渐变，外层容器 hidden 裁剪，内层动态缩放高度模拟燃烧收缩，并叠加微抖动与亮度闪烁动效，兼顾 h5 多端兼容性。
直接用 CSS 的 linear-gradient 就能做出烈焰红橙渐变的倒计时条，关键在颜色过渡要够“燃”、方向要垂直、动画要流畅。
烈焰红橙渐变色值搭配
选对颜色是基础。推荐这组高饱和、有层次的红橙过渡：
- #ff2a00（炽热正红，类似火焰核心）
- #ff6b00（明亮橙红，火焰中层）
- #ffa500（经典橙色，火焰外缘）
避免用太粉或太黄的橙，否则“烈焰感”会弱。三色比两色过渡更自然，尤其适合长条形进度条。
垂直线性渐变 + 裁剪实现动态收缩效果
倒计时条本质是“宽度/高度随时间减少”，但渐变本身不随尺寸变化而重绘——所以要用容器裁剪+子元素渐变来模拟“燃烧收缩”：
- 外层容器设固定宽高、
overflow: hidden - 内层条用
height: 100%或width: 100%，背景设为linear-gradient(to top, #ff2a00, #ff6b00, #ffa500) - 用 JS 动态修改内层条的
width（横向）或height（纵向），视觉上就像烈焰从右往左/从下往上“烧尽”
例如纵向倒计时条（更像熔岩下降）：.countdown-bar { height: 8px; overflow: hidden; }<br>.bar-fill { height: 100%; background: linear-gradient(to top, #ff2a00, #ff6b00, #ffa500); }
加点微动效增强“燃烧感”
纯线性收缩略显机械，可叠加轻微抖动或亮度波动：
- 用
@keyframes给.bar-fill添加transform: scaleY(0.98) translateX(1px)的循环微偏移（幅度控制在 ±2px 内） - 配合
filter: brightness(1.05)到brightness(0.95)的小幅闪烁 - 动画时长设为 1.2s～1.8s，和倒计时节奏错开，避免眩晕
适配 H5 多端显示的小细节
H5 页面常需兼容 iOS Safari 和安卓 WebView，注意三点：
- 渐变写全兼容语法：
background: -webkit-linear-gradient(top, #ff2a00, #ff6b00, #ffa500); background: linear-gradient(to bottom, #ff2a00, #ff6b00, #ffa500); - 避免用
vh/vw做条高，改用px或rem，防止 iOS 地址栏缩放导致跳变 - 倒计时更新建议用
requestAnimationFrame替代setInterval，更顺滑且省电
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
