Titre de l'animation

2,738 Lilian

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 July 2025

Animation de basculement de triangle CSS

14 September 2024

Formulaire de connexion moderne

17 August 2024

Modèle de barre de navigation Bootstrap

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>

CSS