-
Bonjour animé en CSS3 pur
Une animation de texte uniquement en CSS
B O N J O U REn 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 <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>
Tags : animationCSS
-
Commentaires
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
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 ;).
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
Ajouter un commentaire
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