逛博客的时候发现了渐变色的应用，再辅助上animation属性，就可以实现动态渐变色。主要思路就是利用一个比容器大数倍的渐变色背景配合移动动画，容器就像一个取色框，在大背景上取不同地方的图片。

渐变色

主要分为线性渐变 linear-gradient和径向渐变 radial-gradient

普通线性渐变

方向为上下，渐变色为橙色->红色：

1
2
3
<style>
    background: linear-gradient(rgb(255, 123, 0), rgb(255, 0, 0));
</style>

指定的颜色可以是任意多个。

指定方向

例如从左向右可以这么写：

1
2
3
<style>
	background: linear-gradient(to right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

这里的to right表示从左向右渐变，right可以替换为bottom left、bottom right等。或者可以直接指定角度，将to right整体替换为0deg，0是角度，deg是角度单位，若角度值为正，表示顺时针旋转角度，若角度为负，表示逆时针选准渐变方向。

径向渐变

懒得写了zzzz

动画效果

渐变色移动需要使用对应的动画，动画使用animation属性，并且还需要定义一个帧动画。我们可以通过设置background-size属性将渐变色背景放大。我们在source目录下创建一个自定义css文件，写入以下内容，并在主题配置文件中的inject配置导入这个css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#footer {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: moveGradient 10s ease infinite;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

@keyframes moveGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

以上样式代码中，第一部分#footer中animation定义动画，moveGradient是自定义动画的动画名称，10s表示10秒一个周期，infinite表示动画循环播放，ease指定了预设速度曲线。第二部分@keyframes表示我们创建的关键帧动画，moveGradient是我们创建的动画的名字，其内部就是这个动画过程。第一个0%表示一个动画周期中进行到到0%时的背景状态，background-position表示当前背景在此时刻移动至何位置。我们在此定义了3个状态，起始是移动至左侧中心、随后移动至右侧中心，最后移动至原本位置。