css实现RGB渐变色动画

效果展示

步骤

设置渐变，方向为-90度，水平线性渐变

  background: linear-gradient(-90deg, #f17a4f, #e17394, #40a2c7, #18d0a4);

放大，然后后续移动background背景， 类似于放大照片，然后慢慢向右滑动

 background-size: 300% 300%;

设置关键帧,x轴0-》100%-》0% y轴一直搁中间50%就行，无限循环

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

应用动画，设置时长，速度曲线，循环次数

 animation: gradientAnimation 2s ease infinite;

自己可以设置时间长一点