Efecto de texto con fallo CSS

Abrir en el editor Video Publica tu código

Recomendado

15 September 2025

Animación de burbuja de pensamiento CSS

15 May 2025

<!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>

Efecto de texto con fallo CSS

Recomendado

Animación de burbuja de pensamiento CSS

Un código de nasmacadic

Un código de fastclass383

HTML

CSS

JS

Recomendado

Animación de burbuja de pensamiento CSS

Un código de nasmacadic

Un código de fastclass383

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS