Verschieben von Text mit CSS

Ich versuche, eine Textzeile innerhalb einer farbigen Hintergrund-Box hin und her zu bewegen. Ich kann das wunderbar mit dem Marquee-Tag machen, aber da ich gehört habe, dass seine Verwendung nicht empfohlen wird, habe ich mich stattdessen für CSS entschieden. Obwohl ich die Form der Animationsfunktion aus CSS-Tutorials kopiert habe, kann ich nicht herausfinden, warum sich die Linie nicht bewegt. Können Sie mir zeigen, was mit meinem Code nicht stimmt?Verschieben von Text mit CSS

Mein HTML-Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html" charset="UTF-8"> 
     <title>Part 1</title> 
     <link rel="stylesheet" content="text/css" href="part1-2.css"> 
    </head> 

    <body> 
     <div class="background"> 
      <div class="title">I'm moving</div> 
     </div> 
    </body> 
</html>

Mein CSS-Code:

div.background 
{ 
    width: 100%; 
    height: 50px; 
    background-color: #ffcc00; 
} 

div.title 
{ 
    position: relative; 
    font-family: Arial; 
    font-size: 25px; 
    font-weight: bold; 
    -webkit-animation: movingtitle 10s infinite alternate linear; 
    animation: movingtitle 10s infinite alternate linear; 
} 

@-webkit-keyframes movingtitle 
{ 
    from {left: 0px;} 
    to {left: 1366px;} 
}

Quelle

2016-07-04 Brother Eye

Yo Sie implementieren keine einfache @keyframes Funktion, die in einigen Browsern und vielleicht auch in Ihrem Browser aufgerufen wird. Sie können auch margin in animation Funktionen wie folgt

@-webkit-keyframes movingtitle 
{ 
    from {margin-left: 0px;} 
    to {margin-left: 1366px;} 
} 
@keyframes movingtitle 
{ 
    from {margin-left: 0px;} 
    to {margin-left: 1366px;} 
}

Hoffe, es funktioniert !!!

Quelle

2016-07-04 17:38:21

Ja, ich gerade Ich habe das auch herausgefunden. Vielen Dank! –

Können Sie mir sagen, wie man den Text zurückdrückt, nachdem er den Rand der Box berührt hat? Er bewegt sich weiter über die Grenze. –

@Brother Eye welche Box und Grenze sprechen Sie über Es gibt keine in Ihrem Code .. –

Sie text-indent verwenden:

div.background 
 
{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #ffcc00; 
 
} 
 

 
div.title 
 
{ 
 
    position: relative; 
 
    font-family: Arial; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
    -webkit-animation: movingtitle 10s infinite alternate linear; 
 
    animation: movingtitle 10s infinite alternate linear; 
 
    /* added */ 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
} 
 

 
@-webkit-keyframes movingtitle 
 
{ 
 
/* modified */ 
 
    to {text-indent:100%;} 
 
} 
 
@keyframes movingtitle 
 
{ 
 
/* modified */ 
 
    to {text-indent:100%;} 
 
}

<div class="background"> 
 
      <div class="title">I'm moving</div> 
 
     </div>

Quelle

2016-07-04 17:14:48

Wow! Funktioniert wie Charme! Kannst du mir deine Lösung erklären? Warum Text-Einzug verwenden und was ist "white-space: nowrap"? –

@BrotherEye Leerzeichen: nowrap; hält den Text in der Zeile (andernfalls würde er die Zeile auf der rechten Seite abwickeln). text-indent drückt oder pulsiert den Text entsprechend den gesetzten Werten (normalerweise verwendet, um einen neuen Parapgraph mit einem klassischen durchschnittlichen Texteinzug zu zeigen: 1em; 100% nimmt die volle Breite des Containers. –

Ich glaube, ich habe gerade herausgefunden, was los ist. Ich habe @keyframes nach @ -webkit- vergessen! Vielen Dank! Du hast mir gerade einen netten Weg gezeigt, mich zu bewegen! –

Verschieben von Text mit CSS

Antwort

Verwandte Themen