-
Par Maximum 34 le 24 Novembre 2014 à 17:00
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>
4 commentaires