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

作者: HAS

时间: 2019-10-20

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

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

[tag type="success"]html代码[/tag]

```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>
```

[tag type="success"]CSS代码[/tag]

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

```

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://cnd.haser.top/zdyi/10-20/%E5%8F%82%E8%80%83%E6%96%87%E4%BB%B6.zip"]源码下载[/button]

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

添加新评论

最新文章

最近回复

分类

归档

其它