5、css3 自动动画渐变背景

最新推荐文章于 2024-08-31 09:27:14 发布

cyz141001

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量406

点赞数 2

分类专栏：前端微型项目文章标签： css3 前端 css

本文链接：https://blog.csdn.net/cyz141001/article/details/139352277

版权

前端微型项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果例图：（因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%;
    }
}