h5+css 高级登录页面

白書986

已于 2024-01-16 17:21:09 修改

阅读量623

点赞数 12

文章标签： html5 css3

于 2024-01-16 17:16:37 首次发布

本文链接：https://blog.csdn.net/weixin_64738672/article/details/135630216

版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Advanced Login</title>

    <style>

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: #1a1a1a;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }



        .login-container {

            background-color: #fff;

            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

            padding: 40px;

            border-radius: 8px;

            width: 400px;

            text-align: center;

            position: relative;

        }



        h1 {

            color: #333;

            font-size: 24px;

            margin-bottom: 20px;

        }



        input {

            width: calc(100% - 20px);

            padding: 15px 10px;

            margin: 10px 0;

            box-sizing: border-box;

            border: none;

            border-bottom: 2px solid #3498db;

            background-color: transparent;

            color: #333;

            font-size: 16px;

            outline: none;

        }



        input:focus {

            border-bottom-color: #e74c3c;

        }



        button {

            background-color: #3498db;

            color: #fff;

            padding: 15px 20px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            font-size: 16px;

            transition: background-color 0.3s;

        }



        button:hover {

            background-color: #2980b9;

        }



        .bg-shapes {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            overflow: hidden;

            z-index: -1;

        }



        .circle {

            position: absolute;

            border-radius: 50%;

            background-color: rgba(255, 255, 255, 0.1);

            animation: moveCircle 15s linear infinite;

        }



        @keyframes moveCircle {

            0% {

                transform: translate(-50%, -50%) rotate(0deg);

            }

            100% {

                transform: translate(-50%, -50%) rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="bg-shapes">

        <!-- Animated circles for background -->

        <div class="circle" style="width: 200px; height: 200px; top: 20%; left: 10%;"></div>

        <div class="circle" style="width: 150px; height: 150px; top: 70%; left: 70%;"></div>

    </div>



    <div class="login-container">

        <h1>Advanced Login</h1>

        <form action="/login" method="post">

            <input type="text" name="username" placeholder="Username" required>

            <input type="password" name="password" placeholder="Password" required>

            <button type="submit">Login</button>

        </form>

    </div>

</body>

</html>