5、css3 自动动画渐变背景
效果例图：（因gif图片太大，而csdn只能上传小于5m图片，所以无法上传）
1、首先上传html代码：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./3.css"><title>Document</title>
</head><body><div class ="text">CSS 渐变酷炫背景动画效果</div>
</body>
</html>2、上传核心CSS3代码：
body{height: 100vh;width: 100vw;margin: 0;padding: 0;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;background-size: 400%;background-image: linear-gradient(90deg,#2c3e50,#27ae60,#b9aa29,#2980b9,#e74c3c,#8e44ad);animation: bganimation 15s infinite;
}
.text{color: white;text-align: center;text-transform: uppercase;padding: 30vh;font-size: 22px;
}
@keyframes bganimation{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}
}