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

2021-07-04 20:03 峰华前端工程师

那种首页有好看的渐变背景动画的效果是怎么实现的呢?我们知道 css 的 linear-gradient() 函数不支持对它其中的颜色参数进行动画,还有其它纯 CSS 的方式吗?

这里可以利用 background-position 移动背景的位置来实现。假设网站背景有两种渐变色,每种渐变色由两种颜色组成,那么我们可以直接把这 4 个颜色写到 linear-gradient() 中:

backgroundlinear-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-position0% 0%;
  }
  100% {
    background-position100% 100%;
  }
}

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

是不是很简单?只需结合使用 background-position 和 background-size 就可以了。

如有帮助,请关注,感谢!

点击阅读原文/扫码查看B站配套视频文本、技术教程、实战课程、资源导航以及小工具!https://zxuqian.cn

图片


本文章转载自公众号:qiantu_me

首页 - 前端 相关的更多文章: