sitemeta渐变背景实现

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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%;
}
}

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

------ 本文结束  感谢阅读 ------