Efecto de texto con fallo CSS

543 mambetovv

Abrir en el editor Publica tu código

Recomendado

17 May 2024

Página de destino

26 October 2024

Bot de planes (página de inicio)

1 October 2025

Plantilla HTML de portafolio personal

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>

Recomendado

Página de destino

Bot de planes (página de inicio)

Plantilla HTML de portafolio personal

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS