पैनल

अनुशंसित

22 November 2025

CSS के साथ HTML लाइट इफ़ेक्ट कंटेनर

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>

पैनल

अनुशंसित

HTML स्नेक गेम कोड

विशेष बल भर्ती

CSS के साथ HTML लाइट इफ़ेक्ट कंटेनर

HTML

CSS

JS

अनुशंसित

HTML स्नेक गेम कोड

विशेष बल भर्ती

CSS के साथ HTML लाइट इफ़ेक्ट कंटेनर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS