Panel

1549 YAHIR

Abrir en el editor Publica tu código

Recomendado

7 May 2025

Un código de Developer7

10 July 2025

Ejemplo HTML de pantalla de carga animada con CSS

23 August 2025

Plantilla HTML para tienda de comercio electrónico Tailwind CSS

HTML

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

Recomendado

Un código de Developer7

Ejemplo HTML de pantalla de carga animada con CSS

Plantilla HTML para tienda de comercio electrónico Tailwind CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS