Panel

Abrir en el editor Publica tu código

Recomendado

21 September 2024

Efecto de desplazamiento de tarjeta 3D

3 July 2025

<!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>

Panel

Recomendado

Cursor pegajoso

Efecto de desplazamiento de tarjeta 3D

El registro del DOC

HTML

CSS

JS

Recomendado

Cursor pegajoso

Efecto de desplazamiento de tarjeta 3D

El registro del DOC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS