动态对角渐变色背景

动态对角渐变色背景

前言：

1. 我并没有深入了解，难免出错

一、效果图

二、代码

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

三、原理

1.创建一个线性渐变背景

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

2.拉伸背景到宽度和高度的四倍，相当于截取其中的一部分并铺满容器

background-size: 400% 400%;

3.创建动画，定时改变背景位置，相当于截取的位置不同，背景的内容也不同

animation: gradient 15s ease infinite;
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }