Conception de formulaire de connexion animé CSS

632 codex

Ouvrir dans l'éditeur Publiez votre code

Conception de formulaire de connexion animé CSS

Recommandé

25 March 2025

Un code par andrej.social.network

21 September 2024

Curseur de déplacement rotatif

18 May 2024

Formulaire de connexion flou

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1c1c1c;
            /* Deep dark background */
            overflow: hidden;
        }

/* The container for the spinning effect */
        .box {
            position: relative;
            width: 380px;
            height: 420px;
            background: #1c1c1c;
            border-radius: 8px;
            overflow: hidden;
        }

/* The spinning gradient beam */
        .box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
        }

/* The second beam for color contrast (Magenta) */
        .box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
            animation-delay: -3s;
            /* Delays it to be on the opposite side */
        }

/* The inner form container overlay */
        .form-content {
            position: absolute;
            inset: 4px;
            /* Creates the border thickness */
            background: #222;
            /* Slightly lighter than body */
            padding: 50px 40px;
            border-radius: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
        }

@keyframes animate {
            0% {
                transform: rotate(0deg);
            }

100% {
                transform: rotate(360deg);
            }
        }

h2 {
            color: #fff;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
        }

/* Input Styling with Floating Animation */
        .inputBox {
            position: relative;
            width: 100%;
            margin-top: 35px;
        }

.inputBox input {
            position: relative;
            width: 100%;
            padding: 20px 10px 10px;
            background: transparent;
            outline: none;
            border: none;
            box-shadow: none;
            color: #23242a;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
            z-index: 10;
        }

.inputBox span {
            position: absolute;
            left: 0;
            padding: 20px 0px 10px;
            pointer-events: none;
            color: #8f8f8f;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
        }

/* Logic for floating label */
        .inputBox input:valid~span,
        .inputBox input:focus~span {
            color: #fff;
            font-size: 0.75em;
            transform: translateY(-34px);
        }

/* The animated underline */
        .inputBox i {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.5s;
            pointer-events: none;
        }

.inputBox input:valid~i,
        .inputBox input:focus~i {
            height: 44px;
            /* Expands to fill background */
        }

/* Links styling */
        .links {
            display: flex;
            justify-content: space-between;
        }

.links a {
            margin: 10px 0;
            font-size: 0.75em;
            color: #8f8f8f;
            text-decoration: none;
        }

.links a:hover,
        .links a:nth-child(2) {
            color: #fff;
        }

/* Submit Button */
        input[type="submit"] {
            border: none;
            outline: none;
            padding: 9px 25px;
            background: #fff;
            cursor: pointer;
            font-size: 0.9em;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-top: 10px;
        }

input[type="submit"]:active {
            opacity: 0.8;
        }

/* The Glow Effect behind the box */
        .border-line {
            position: absolute;
            top: 0;
            inset: 0;
        }

/* Adds a subtle pulse to the form */
        .box:hover .form-content {
            background: #25252b;
            transition: 0.5s;
        }
    </style>
</head>

<body>

<div class="box">
        <div class="form-content">
            <h2>Sign In</h2>
            <form>
                <div class="inputBox">
                    <input type="text" required="required">
                    <span>Username</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input type="password" required="required">
                    <span>Password</span>
                    <i></i>
                </div>
                <div class="links">
                    <a href="#">Forgot Password</a>
                    <a href="#">Signup</a>
                </div>
                <input type="submit" value="Login">
            </form>
        </div>
    </div>

</body>

</html>

CSS