Título de la animación

1901 Lilian

Abrir en el editor Publica tu código

Recomendado

21 October 2024

Entradas de un solo dígito con un elemento

5 May 2025

Un código por página de destino

23 May 2025

Un código de creativearray554

HTML

<!doctype html>
<html lang="en">
<head>
  <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>  
</head>
<body>
    <ul>
        <li>R</li>
        <li>U</li>
        <li>S</li>
        <li>N</li>
        <li>A</li>
        <li>K</li>
        <li>_</li>
        <li>L</li>
        <li>I</li>
        <li>L</li>
        <li>I</li>
        <li>A</li>
        <li>N</li>
    </ul>
</body>
</html>

Título de la animación

Recomendado

Entradas de un solo dígito con un elemento

Un código por página de destino

Un código de creativearray554

HTML

CSS

JS

Recomendado

Entradas de un solo dígito con un elemento

Un código por página de destino

Un código de creativearray554

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS