web-dev-qa-db-fra.com

Effet de chapiteau CSS3

Je crée un effet Marquee avec une animation CSS3. Voici mes codes.

Balise HTML:

<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

CSS:

#caption
{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }
@-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }

Je peux maintenant obtenir l’effet de base Marquee, mais les codes ne sont pas assez judicieux.

Je me demande s’il est possible d’éviter d’utiliser des valeurs spécifiques telles que margin-left:-4200px;, de sorte qu’il puisse adapter le texte dans n’importe quelle longueur.

En outre, cela ne fonctionne pas correctement dans Firefox et Safari, mais également dans Chrome.

Voici une démo similaire: http://jsfiddle.net/jonathansampson/XxUXD/ , il utilise text-indent mais avec toujours des valeurs spécifiques.

Tout conseil sera apprécié.

Fred

csshtml5css3
34
Fred Wu

Avec une petite modification du balisage, voici mon approche (je viens d'insérer une span dans le paragraphe):

Exemple de violon: http://jsfiddle.net/MaY5A/1/ -

Markup

<p class="Microsoft Marquee"><span>Windows 8 and ...</span></p>

CSS

.Marquee {
    width: 450px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.Marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the Marquee just outside the paragraph */
    animation: Marquee 15s linear infinite;
}

.Marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes Marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Aucune valeur codée en dur - dépendant de la largeur du paragraphe - n'a été insérée

L'animation applique la propriété CSS3 transform (utilisez les préfixes si nécessaire) pour qu'elle fonctionne correctement. 

Si vous devez insérer un délai une seule fois au début, définissez également un animation-delay. Si vous devez plutôt insérer un petit retard à la boucle every, essayez de jouer avec un padding-left supérieur (par exemple, 150%).

76
fcalderan

Ce qui suit devrait faire ce que vous voulez.

@keyframes Marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}
0
Lars Beck