【CSS】动态背景1

最新推荐文章于 2024-10-09 12:10:17 发布

ོ栖落

最新推荐文章于 2024-10-09 12:10:17 发布

阅读量969

点赞数

分类专栏： # css 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_63806300/article/details/130834392

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 30px;
           height: 100vh;
           color: #fff;
           background-image: linear-gradient(
                125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad
           );
           background-size: 400%;
           animation: move 20s infinite;
       }
       @keyframes move{
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body>
    <h1>background</h1>
</body>
</html>