利用background-position

关键点：

1. 以用background-size将background放大，保证background-positiond可以活动
2. 利用background-position的特点在背景中进行运动

注意点： 运动的路线和渐变的角度，渐变角度位0deg,180edg的时候不可以进行水平移动，因为它其实是在一个颜色移动，导致无法达到变色效果

div {
    height: 600px;
    width: 600px;
    animation: gradientChange 2s infinite alternate;
    background-image: linear-gradient(45deg,#FA8BFF 0%,#2BD2FF 52%,#2BFF88 95%);
    background-size: 200% 100%; 
}
@keyframes gradientChange  {
    0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 100% 0%;
    }

}

利用background-size

size和positon的原理基本差不多，就是一个改变大小，一个改变位置

    div {
    height: 600px;
    width: 600px;
    animation: gradientChange 2s infinite alternate;
    background-image: linear-gradient(45deg,#FA8BFF 0%,#2BD2FF 52%,#2BFF88 95%);
    background-position-x: 100%;
}
@keyframes gradientChange  {
    0% {
        background-size: 300% 100%;
    }
    100% {
        background-size: 100% 100%;
    }

}

利用伪元素和translate

    div {
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 180px;
}
div::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        bottom: -100%;
        right: -100%;
        background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 100% 100%;
        animation: bgposition 8s infinite linear alternate;
        z-index: -1;
    }
  
@keyframes bgposition {
    0% {
        transform: translate(30%, 30%);
    }
    25% {
        transform: translate(30%, -30%);
    }
    50% {
        transform: translate(-30%, -30%);
    }
    75% {
        transform: translate(-30%, 30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}

利用filter: hue-rotate

.cgradient{
            background-image: 
            linear-gradient(45deg, #79CBCA , #E684AE );
            width:50%;
            height: 50%;
            animation: cgradient 3s infinite alternate ease-in-out;
            overflow: hidden;
            filter: hue-rotate(90deg);
    }
@keyframes cgradient {
    from{
        filter: hue-rotate(0deg);
    }
    to{
        filter: hue-rorate(90deg);
    }
}

filter: hue-rotate 这个方法是最简单的一个，只是没有用过filter可能有点懵！

菜鸟教程的解释：hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

那什么是色环？

也就是在你给定的颜色，角度下颜色发送变化

比如图例，给红色和180°，那它的颜色红慢慢变到绿

关于hue_retate的其他用法 可以参考

www.zhangxinxu.com/wordpress/2…

错误的方法：直接更改linear-gradient

开始以为直接更改linear-gradient就可以实现，当是出现的帧动画（就是一个渐变直接跳到了另外一个渐变）。