動態(tài)對角漸變色背景

前言：

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.創(chuàng)建一個線性漸變背景

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

2.拉伸背景到寬度和高度的四倍，相當(dāng)于截取其中的一部分并鋪滿容器

background-size: 400% 400%;

3.創(chuàng)建動畫，定時改變背景位置，相當(dāng)于截取的位置不同，背景的內(nèi)容也不同

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