使用 CSS 实现渐变背景色过渡动画
那种首页有好看的渐变背景动画的效果是怎么实现的呢?我们知道 css 的 linear-gradient() 函数不支持对它其中的颜色参数进行动画,还有其它纯 CSS 的方式吗?
这里可以利用 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%;
}
}
这样就实现了渐变背景色的动画效果了!
是不是很简单?只需结合使用 background-position 和 background-size 就可以了。如果觉得视频有帮助请三连,想优雅的学前端,请关注峰华前端工程师,感谢观看!
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买