html漂亮的动态背景切换

最新推荐文章于 2024-04-20 11:08:24 发布

背着行囊去远方

最新推荐文章于 2024-04-20 11:08:24 发布

阅读量3.2k

点赞数 3

分类专栏：学习笔记文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_28121913/article/details/122359084

版权

学习笔记专栏收录该内容

31 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>漂亮背景</title>
    <meta charset="utf-8"/>
    <meta name="author" content="Stars"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            background-size: 500%;
            animation: backgroundframe 15s infinite linear;
        }
        @keyframes backgroundframe {
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
		input:focus{
		    box-shadow: 0 0 5px #9ecaed;
			outline: none;
            border-color: #9ecaed;
            
		}
    </style>
</head>
<body>
    <div style="padding:25px;border-radius:15px;background-color: white;display: flex;flex-direction: column;">
        <h2 style="text-align: center;">商城系统</h3>
            <div style="display: flex;padding: 10px;">
                <h3 style="flex: 1;text-align:center;background-color: yellow;">用户登录</h3>
                <h3 style="flex: 1;text-align:center;background-color: yellowgreen;">用户注册</h3>
            </div>
        <form>
            <div style="padding:10px;display: flex;align-items: center;">
                <label style="width: 25%;">用户名</label>
                <input style="width: 75%;border-radius: 0;padding:5px;outline:0;height: 30px;border: 1px solid grey;color: grey;" type="text" name="username" placeholder="请输入用户名"/>
            </div>
            <div style="padding:10px;display: flex;align-items: center;">
                <label style="width: 25%;">密码</label>
                <input style="width: 75%;border-radius: 0;outline:0;padding:5px;height: 30px;border: 1px solid grey;color: grey;" type="password" name="password" placeholder="请输入用户名"/>
            </div>
        </form>
    </div>
</body>
</html>

网页效果