CSS गड़बड़ पाठ प्रभाव

546 mambetovv

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

20 May 2025

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

17 July 2025

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

7 November 2024

टेक्स्ट होवर एनीमेशन प्रभाव

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glitch Effect</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 100vh;
            width: 100%;
            background: radial-gradient(#480d35, #17151d);
            display: grid;
            place-items: center;
            overflow: hidden;
        }
        
        h1 {
            position: relative;
            font-family: "Poppins", sans-serif;
            color: #f6d8d5;
            font-size: 150px;
            font-weight: 700;
            letter-spacing: 2px;
            transition: all 0.3s ease;
        }
        
        h1:hover {
            color: rgba(0, 194, 203, 0.2);
        }
        
        h1::before,
        h1::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }
        
        h1::before {
            animation: glitch-1 0.8s infinite;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
            transform: translate(-0.025em, -0.0125em);
            color: #ec2225;
            z-index: -1;
        }
        
        h1::after {
            animation: glitch-2 0.8s infinite;
            clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0 100%);
            transform: translate(0.0125em, 0.025em);
            color: #313f97;
            z-index: -2;
        }
        
        h1:hover::before {
            animation: glitch-1 0.65s infinite;
        }
        
        h1:hover::after {
            animation: glitch-2 0.65s infinite;
        }
        
        @keyframes glitch-1 {
            0%, 14%, 15%, 49%, 50%, 99%, 100% {
                opacity: 1;
                transform: translate(-0.025em, -0.0125em);
            }
            1%, 12% {
                opacity: 0.8;
                transform: translate(-0.035em, -0.0225em);
            }
            2%, 11% {
                opacity: 0.9;
                transform: translate(0.025em, 0.0125em);
            }
        }
        
        @keyframes glitch-2 {
            0%, 20%, 21%, 62%, 63%, 99%, 100% {
                opacity: 1;
                transform: translate(0.0125em, 0.025em);
            }
            1%, 19% {
                opacity: 0.8;
                transform: translate(0.0225em, 0.035em);
            }
            2%, 18% {
                opacity: 0.9;
                transform: translate(-0.0125em, -0.025em);
            }
        }
        
   
        @keyframes flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                text-shadow: 0.05em 0 0 #ec2225, -0.025em -0.05em 0 #313f97, 0.025em 0.05em 0 #50c878;
            }
            20%, 24%, 55% {
                text-shadow: none;
            }
        }
        
        h1:hover {
            animation: flicker 1.5s infinite;
        }
    </style>
</head>
<body>
    <h1 data-text="Mambetovv!">Mambetovv!</h1>
</body>
</html>

अनुशंसित

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

टेक्स्ट होवर एनीमेशन प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS