HTML+CSS3实现动态背景渐变色

Author： HAS
发布时间：October 20, 2019
3772 views
One comment
978 words
Categories：学习笔记 HTML/CSS

### 我们需要实现的是如下效果:

![](https://cnd.haser.top/2019/10/19/6.gif)

<span class="label bg-success">html代码</span>

```html
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>HAS的日记-背景动态渐变实例效果</title>
	<link href="has.css" rel="stylesheet" type="text/css" />
</head>
<body class="has">
<h1 align="center">背景动态渐变实例效果</h1>
</body>
</html>
```

<span class="label bg-success">CSS代码</span>

```css
body {
			margin: 0;
			width: 100%;
			height: 1200px;
			font-family: "Exo", sans-serif;
			color: #fff;
			background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
			background-size: 400% 400%;
			animation: gradientBG 15s ease infinite;
		}

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

.container {
			width: 100%;
			position: absolute;
			top: 35%;
			text-align: center;
		}

h1 {
			font-weight: 300;
		}

```

Last modification：May 18, 2021