← 返回导航

渐变背景流动

animations

关键点

  • 渐变背景流动通过 background-position 的持续变化，让渐变色看起来在移动
  • 背景设置一个大尺寸的多色渐变（background-size: 200% 200% 或更大）
  • 使用 @keyframes 让 background-position 在对角线上循环移动
  • 色阶选择 2-4 个相近色过渡最自然，对比色强烈则视觉冲击力更强
  • 动画速度不宜太快，10-20s 一个周期较舒缓，适合作为页面背景氛围

效果说明

渐变背景持续流动。用多色 linear-gradient 做背景，background-size: 400% 400% 放大后，通过 background-position 在 0% 与 100% 之间往返动画，色彩便持续流动。纯 CSS 实现，性能友好，常用于页面 Hero 区、卡片头图的氛围背景。