• animation CSS machine à écrire ٩◔̯◔۶

    Bonjour et bienvenue sur ce blog..

    Une petite animation pour votre page d'accueil ou ailleurs 
    uniuqement en CSSヽ༼ʘ̚ل͜ʘ̚༽ノ

    <style><!--
    @-webkit-keyframes typing {
    from { width: 0 }
    to { width:50% }
    }

    @-moz-keyframes typing {
    from { width: 0 }
    to { width:50% }
    }

    @-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black}
    }

    @-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
    }

    #machine { font-family: Consolas, monospace; }

    .machinebox {
    font-size:150%;
    width:50%;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid red;

    -webkit-animation: typing 17s steps(33, end), /*  steps =nbre de caracteres et espaces */
    blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(33, end), 
    blink-caret 1s step-end infinite;
    }
    --></style>
    <div id="machine" class="machinebox">Bonjour et bienvenue sur ce blog..</div>

    Bien sur, on peut changer le message, il suffit de compter les caractères et espaces pour modifier le nombre 33 dans le code ci-dessus.

    « Images recto verso ou effet fondu passage sourisAlléger les photos en ligne »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    a
    Lundi 10 Décembre 2018 à 19:00

    a

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    2
    a
    Lundi 10 Décembre 2018 à 19:01

    <?php echo"<script>console.log('xss php')</scrip>"; ?>

    3
    Samedi 4 Mai 2019 à 15:38

    Super merci pour ce morceau de code. Je l'ai adapté à mon site :).

    Encore merci



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl