texto de animación

3,659 0 Lilian Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

texto de animación

Recomendado

7 March 2025

Formulario de inicio de sesión animado

19 December 2025

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

17 July 2025

Página de inicio de sesión de CoffeeShop con efecto cristal y viento de cola

HTML

CSS

<style>
    body{
        margin: 0;
        padding: 0;
        background: #262626;
    }
    ul{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        margin: 0;
        padding: 0;
        display: flex;
    }
    ul li{
        list-style: none;
        font-family: arial;
        font-size: 3em;
        letter-spacing: 15px;
        text-shadow: none;
        animation: animate 1s infinite linear;
    }
    @keyframes animate{
        0%{
            color: #484848;
            text-shadow: none;
        }
        18%{
            color:#484848;
            text-shadow: none;
        }
        20%{
            color: rgb(57, 255, 7);
            text-shadow: 0 0 7px #00d5ff ,0 0 20px #f6ff00;
        }
        30%{
            color: #484848;
            text-shadow: none;
        }
        35%{
            color: rgb(0, 255, 0);
            text-shadow:0 0 7px #00ccff ,0 0 20px #f6ff00;
        }
        70%{
            color:#484848;
            text-shadow: none;
        }
        85%{
            color: rgb(1, 255, 1);
            text-shadow: 0 0 7px #00ffe1 ,0 0 20px #f6ff00;
        }
        90%{
            color: #484848;
            text-shadow: none;
        }
        100%{
            color:#484848;
            text-shadow: none;
        }
    }
    ul li:nth-child(1){
        animation-delay: .2s;
    }
    ul li:nth-child(2){
        animation-delay: .4s;
    }
    ul li:nth-child(3){
        animation-delay: .6s;
    }
    ul li:nth-child(4){
        animation-delay: .8s;
    }
    ul li:nth-child(5){
        animation-delay: .1s;
    }
    ul li:nth-child(6){
        animation-delay: .1.2s;
    }
    ul li:nth-child(7){
        animation-delay: .1.4s;
    }
    ul li:nth-child(8){
        animation-delay: .1.6s;
    }
    ul li:nth-child(9){
        animation-delay: .1.8s;
    }
    ul li:nth-child(10){
        animation-delay: .2s;
    }
    ul li:nth-child(11){
        animation-delay: .2.2s;
    }
    ul li:nth-child(12){
        animation-delay: .2.4s;
    }
    ul li:nth-child(13){
        animation-delay: .2.6s;
    }
  </style>

JS

Comments 0

…