Panneau

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 May 2024

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel de Registro</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1a1a1a;
            font-family: Arial, sans-serif;
            color: white;
        }

.neon-panel {
            width: 350px;
            padding: 40px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 20px #00ffcc, 0 0 30px #00ffcc;
            position: relative;
            overflow: hidden;
            animation: neon-border 5s infinite;
        }

@keyframes neon-border {
            0% { box-shadow: 0 0 20px red, 0 0 30px red; }
            20% { box-shadow: 0 0 20px yellow, 0 0 30px yellow; }
            40% { box-shadow: 0 0 20px green, 0 0 30px green; }
            60% { box-shadow: 0 0 20px blue, 0 0 30px blue; }
            80% { box-shadow: 0 0 20px purple, 0 0 30px purple; }
            100% { box-shadow: 0 0 20px pink, 0 0 30px pink; }
        }

.neon-panel:before {
            content: '';
            position: absolute;
            top: 0;
            left: -50%;
            width: 200%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(0, 255, 204, 0.5), transparent);
            transform: skewX(0deg);
            transition: 0.5s;
        }

.neon-panel:hover:before {
            transform: skewX(20deg) translateX(20%);
        }

h2 {
            text-align: center;
            margin-bottom: 20px;
            animation: neon-text 5s infinite;
            text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
        }

@keyframes neon-text {
            0% { color: red; }
            20% { color: yellow; }
            40% { color: green; }
            60% { color: blue; }
            80% { color: purple; }
            100% { color: pink; }
        }

.input-container {
            margin-bottom: 20px;
            position: relative;
        }

.input-container input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: none;
            border-bottom: 2px solid #00ffcc;
            outline: none;
            color: white;
            font-size: 16px;
            animation: neon-text 5s infinite;
        }

.input-container label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            pointer-events: none;
            transition: 0.5s;
            animation: neon-text 5s infinite;
        }

.input-container input:focus ~ label,
        .input-container input:valid ~ label {
            top: -20px;
            left: 0;
            font-size: 12px;
        }

.neon-button {
            width: 100%;
            padding: 10px;
            background-color: #00ffcc;
            border: none;
            border-radius: 25px;
            color: black;
            font-size: 16px;
            cursor: pointer;
            transition: 0.5s;
            box-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
            animation: neon-text 5s infinite;
        }

.neon-button:hover {
            background-color: #ff00ff;
            box-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff;
            color: white;
        }
    </style>
</head>
<body>

<div class="neon-panel">
        <h2>Crear Cuenta</h2>
        <form>
            <div class="input-container">
                <input type="text" required>
                <label>Nombre de usuario</label>
            </div>
            <div class="input-container">
                <input type="email" required>
                <label>Correo electrónico</label>
            </div>
            <div class="input-container">
                <input type="password" required>
                <label>Contraseña</label>
            </div>
            <button class="neon-button">Registrarse</button>
        </form>
    </div>

</body>
</html>

Panneau

Recommandé

Barre de navigation réactive

Un code de Ghost????

Un code par securearray494

HTML

CSS

JS

Recommandé

Barre de navigation réactive

Un code de Ghost????

Un code par securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS