动态对角渐变色背景

动态对角渐变色背景

前言：

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%; } }