texte animé

Ouvrir dans l'éditeur Publiez votre code

texte animé

Recommandé

22 August 2024

Carte animée avec effet de survol 3D

13 May 2023

Bouton de téléchargement animé

28 April 2024

Bouton HTML animé

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