使用 CSS 实现渐变背景色过渡动画

一月, 2021 · 预计阅读时间： 2 分钟

这里可以利用 background-position 移动背景的位置来实现。

假设网站背景有两种渐变色，每种渐变色由两种颜色组成，那么我们可以直接把这 4 个颜色写到 linear-gradient() 中：

background: linear-gradient(135deg, hsl(170deg, 80%, 70%), hsl(190deg, 80%, 70%), hsl(250deg, 80%, 70%), hsl(320deg, 80%, 70%));

一开始它会显示所有 4 个渐变颜色，这时我们可以使用 background-size 在 x 和 y 轴方向上把背景尺寸调大 2 倍：

background-size: 200% 200%;

接着在动画中使用 background-position 移动背景位置，在 x 轴和 y 轴上分别从 0% 移动到 100%：

@keyframes gradient-move {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

这样就实现了渐变背景色的动画效果了！

源码
import styled from 'styled-components'

const DivWrapper = styled.div`
  position: relative;

  div {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, hsl(170deg, 80%, 70%), hsl(190deg, 80%, 70%), hsl(250deg, 80%, 70%), hsl(320deg, 80%, 70%));
    background-size: 200% 200%;
    animation: gradient-move 12s linear infinite alternate;
  }

  @keyframes gradient-move {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 100% 100%;
    }
  }
`

export default function () {
  return (
    <DivWrapper>
      <div className="gradient-move"></div>
    </DivWrapper>
  )
}