• Bonjour animé en CSS3 pur

    Par Maximum 34 dans Gadgets le 24 Novembre 2014 à 17:00

    Une animation de texte uniquement en CSS Animation Texte en CSS3

    B O N J O U R

     

    En passant pas le bouton <> code source de l'éditeur de module ou l'éditeur d'article, copier ce code html ainsi que le CSS entre les balises <style> et </style>

    <div id="animtitre">
    <p>Une animation de texte uniquement en CSS&nbsp;<img src="http://ekladata.com/Ttaj4vMIbr0DoVP3nnaIV28cryo.png" alt="Animation Texte en CSS3" /></p>
    <div id="flash"><span class="span-top">B</span> <span class="span-bottom">O</span> <span class="span-top">N</span> <span class="span-bottom">J</span> <span class="span-top">O</span> <span class="span-bottom">U</span> <span class="span-top">R</span></div>
    </div>

    <style><!--
    #animtitre { font-family:"Courier New", Courier, monospace; margin:auto; padding:2px; font-size:14px; color:#F90; text-align:center; opacity:1; }


    #flash { height:32px; width:212px; box-shadow:0 0 20px gray; overflow:hidden; border-radius:4px; }
    #flash span { font-size:36px; /*margin:0;*/ font-weight:bold; padding-top:2px; font-family:"Courier New", Courier, monospace; text-shadow:0 0 2px white; position:relative;margin-top: 4px; }
    .span-top { background:#FF0000; color:green; position:relative; top:-42px; -webkit-animation:span-top 5s infinite; animation:span-top 5s infinite; }
    .span-bottom { background:#00CC00; color:red; top:42px; -webkit-animation:span-bottom 5s infinite; animation:span-bottom 5s infinite; }

    @-webkit-keyframes span-top {
    0% { top:-42px; }
    10% { top:-42px; }
    20% { top:0px; }
    40% { top:0px; }
    50% { top:0; color:red; background:green; }
    60% { top:0; color:red; background:green; }
    70% { top:0; background:#FF0000; color:green; }
    80% { top:0; }
    90% { top:0; }
    100% {top:-42px; }}

    @-webkit-keyframes span-bottom {
    0% { top:42px; -webkit-opacity:1; }
    10% { top:42px; }
    20% { top:0px; }
    40% { top:0px; }
    50% { top:0; color:red; background:green; }
    60% { top:0; color:red; background:green; }
    70% { background:#00CC00; color:red; }
    90% { top:0; }
    100% {top:42px; }
    80% { top:0; } }

    @keyframes span-top {
    0% { top:-42px; }
    10% { top:-42px; }
    20% { top:0px; }
    40% { top:0px; }
    50% { top:0; color:red; background:green; }
    60% { top:0; color:red; background:green; }
    70% { top:0; background:#FF0000; color:green; }
    80% { top:0; }
    90% { top:0; }
    100% {top:-42px; } }

    @keyframes span-bottom {
    0% { top:42px; -webkit-opacity:1; }
    10% { top:42px; }
    20% { top:0px; }
    40% { top:0px; }
    50% { top:0; color:red; background:green; }
    60% { top:0; color:red; background:green; }
    70% { background:#00CC00; color:red; }
    90% { top:0; }
    100% {top:42px; }
    80% { top:0; } }
    --></style>

    « La baleine de MozillaAlignement photo/texte »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :

  • Commentaires

    1
    Pipiou Profil de Pipiou
    Jeudi 18 Décembre 2014 à 08:39
    Pipiou

    Bonjour bonjour

    et... wouaaaaaah ! c'est vach'ment bien dis donc ! tout plein de trucs dans tous les sens, des couleurs et des formes différentes, ça bouge et ça réagit drôlement bien !

    Au premier coup d'oeil j'ai eu l'impression d'un p'tit fouillis mais j'ai vite compris que c'était plutôt... une drôle de mine qui fourmille d'excellentes idées : on dirait une caverne d'Ali-Baba... super moderne !

    Je prendrai le temps qu'il faut pour revenir et découvrir parce que c'est surprenant : très beau travail !

    Bravo à toi

     

    Répondre
    2
    Maximum 34 Profil de Maximum 34
    Jeudi 18 Décembre 2014 à 13:33
    Maximum 34

    Bonjour Pipiou !

    C'est gentil ce que tu me dis là ...et ça m'encourage parce que, vois-tu, je suis plutôt du genre "bordélique" !!
    Parfois,  je ne retrouve pas mes petits dans mes propres ( au sens : à moi !) blogs !!

    En visitant ton blog, je suis toujours  admiratif de sa structure et de son design . C'est à la fois bien organisé et original. Un bon équilibre qui me sert de modèle...

    Bonne journée

     

    Répondre
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    3
    midori-nor Profil de midori-nor
    Lundi 5 Janvier 2015 à 11:54
    midori-nor

    Bonjour Maximum , je suis du même avis que Pipiou, en plus j'adore le design de ton blog ! L'astuce pour l'entête entièrement cliquable m'a d'ailleurs été bien utile ^^. Bravo et continues comme ça , ce genre de blog est très utile ;).

    Répondre
    4
    Maximum 34 Profil de Maximum 34
    Mercredi 4 Février 2015 à 13:06
    Maximum 34

    Bonjour Midori-nor, 

    Merci de ton passage et de tes encouragements. 
    Ton blog est très agréable à visiter. Ton univers , tes oeuvres me plaisent bien. C'est apaisant.

    Bonne continuation

    Répondre


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl