最近挺多小伙伴来问我,博客的 meta 部分的渐变背景怎么做的,其实很简单,纯 css 就好了,给背景设置一个渐变色,然后添加一个关键帧动画就 OK。这里贴出我的所有样式代码,仅供参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.site-brand-container {
background-image: linear-gradient(
-225deg,
#2cd8d5 0%,
#c5c1ff 56%,
#ffbac3 100%,
#ddd6f3 0%
);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}

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

渐变色配色方案,你可以在 我的收藏 =》设计素材中查看。我收藏了一些渐变色配色方案的网站。