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

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

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>

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:October 20th, 2019 at 05:57 pm
请我喝一瓶农夫山泉呗~~

Leave a Comment