connexion à la bombe

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 August 2024

Animation de couleur de texte CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HACKKEVAKIB LOGIN</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Tektur:wght@400;700&display=swap');
        
        :root {
            --primary: #ff3e00;
            --secondary: #ff9500;
            --dark: #1a1a1a;
            --light: #f0f0f0;
        }
        
        body {
            font-family: 'Tektur', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 62, 0, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(255, 149, 0, 0.1) 0%, transparent 20%);
        }
        
        .login-container {
            position: relative;
            width: 380px;
            padding: 40px;
            background: rgba(30, 30, 30, 0.8);
            border-radius: 16px;
            box-shadow: 0 0 30px rgba(255, 62, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 62, 0, 0.2);
            z-index: 10;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .login-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent,
                transparent,
                transparent,
                rgba(255, 62, 0, 0.1)
            );
            transform: rotate(30deg);
            z-index: -1;
        }
        
        .title {
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 62, 0, 0.3);
            letter-spacing: 2px;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
        
        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
            z-index: 2;
        }
        
        .form-input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            background: rgba(20, 20, 20, 0.7);
            border: 1px solid rgba(255, 62, 0, 0.3);
            border-radius: 8px;
            color: var(--light);
            font-family: 'Tektur', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 62, 0, 0.3);
        }
        
        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }
        
        .btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border: none;
            border-radius: 8px;
            color: white;
            font-family: 'Tektur', sans-serif;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
            z-index: -1;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 62, 0, 0.4);
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .forgot-link {
            display: block;
            text-align: right;
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .forgot-link:hover {
            color: var(--secondary);
        }
        
        /* Bomba efekti için CSS */
        .explosion {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--primary), transparent);
            box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
            transform: scale(0);
            opacity: 0;
            z-index: 100;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--secondary);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }
        
        .countdown {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border: 3px solid var(--primary);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }
        
        .countdown.active {
            opacity: 1;
            transform: scale(1);
            animation: pulse 1s infinite alternate;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 62, 0, 0.7); }
            100% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 62, 0, 0); }
        }
        
        .shake {
            animation: shake 0.5s linear;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        /* Arkaplan efekti */
        .bg-effect {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.1;
            background: 
                radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, var(--secondary) 0%, transparent 20%);
            animation: bgPulse 15s infinite alternate;
        }
        
        @keyframes bgPulse {
            0% { transform: scale(1); opacity: 0.1; }
            50% { transform: scale(1.2); opacity: 0.15; }
            100% { transform: scale(1); opacity: 0.1; }
        }
    </style>
</head>
<body>
    <div class="bg-effect"></div>
    
    <div class="login-container" id="loginContainer">
        <div class="countdown" id="countdown">5</div>
        <h1 class="title">PATLAYAN GİRİŞ</h1>
        
        <div class="input-group">
            <i class="fas fa-user"></i>
            <input type="text" class="form-input" placeholder="Kullanıcı Adı" id="username">
        </div>
        
        <div class="input-group">
            <i class="fas fa-lock"></i>
            <input type="password" class="form-input" placeholder="Şifre" id="password">
        </div>
        
        <a href="#" class="forgot-link">Şifremi Unuttum?</a>
        
        <button class="btn" id="loginBtn">GİRİŞ YAP</button>
    </div>

connexion à la bombe

Recommandé

Effet de survol de carte 3D

Réseaux sociaux en FR

Animation de couleur de texte CSS

HTML

CSS

JS

Recommandé

Effet de survol de carte 3D

Réseaux sociaux en FR

Animation de couleur de texte CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS