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

अनुशंसित

4 November 2024

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

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>

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

अनुशंसित

नेवबार टेम्पलेट HTML CSS

पाठ का एक कोड

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

HTML

CSS

JS

अनुशंसित

नेवबार टेम्पलेट HTML CSS

पाठ का एक कोड

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS