• 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>

    Partager via Gmail Yahoo! Google Bookmarks

    4 commentaires
//script feuille de style suppl