Beispiele für dynamische Texteffekte mit reinem CSS

Ich glaube, jeder hat den mittleren Effekt auf der Website gesehen. Sobald die Seite geöffnet ist, werden wir heute vorstellen, wie man diesen Effekt durch die Verwendung von reinem CSS erzielt .

Möglicherweise sehen Sie oft coole Websites

Auf solchen Websites können Sie sehen, dass sich sowohl Text als auch Bilder mit der angegebenen Zeit ändern, sobald die Seite geöffnet wird. Das Prinzip ist sehr einfach und verwendet hauptsächlich das Animationsattribut in CSS.

Als nächstes werde ich mein aktuelles Projekt als Beispiel nehmen, um den Animationseffekt von Text und Bildern zu realisieren.

HTML-Code schreiben:

Code kopieren

Der Code lautet wie folgt:

<section class="rw-wrapper">
<span class="span-title">文字题目</span>
<h2 class="rw-sentence">
</h2>
</section>

Derzeit wurde das allgemeine Framework geschrieben, einschließlich eines Abschnitts-Tags, eines Spans (nach Wunsch hinzufügen) und eines H2-Tags. Fügen Sie als Nächstes Textcode hinzu. Geben Sie den Code in h2 ein.

Code kopieren

Der Code lautet wie folgt:

<p class="rw-words rw-words-1">
<span>内容1</span>
<span>内容2</span>
...
</p>

Die erste Textanimation in HTML.

Code kopieren

Der Code lautet wie folgt:

<p class="rw-words rw-words-2">
<span>内容1</span>
...
</p>

Die zweite Textanimation HTML.

Kopieren Sie den Code

Der Code lautet wie folgt:

//同理
<p class="rw-words rw-words-3">
<span><img src="图片路径" width="XX" height="XX"></span>
...
</p>

Der Bildtransformationseffekt ist wie im GIF gezeigt über. Bilder gleiten von rechts und ändern sich.

ok, jetzt ist der HTML-Code fertig, jetzt implementieren wir den Kernteil: CSS-Animation und Einstellung des Schriftstils.

CSS-Code schreiben

Code kopieren

Der Code ist wie folgt:

.rw-words{
-webkit-perspective:800px;
-moz-perspective:800px;
-o-perspective:800px;
-ms-perspactive:800px;
perspactive:800px;
}

Übrigens definiert das Perspektive-Attribut den Abstand des 3D-Elements von der Ansicht, in Pixel. Wenn Sie das Perspektive-Attribut für ein Element definieren, erhalten seine untergeordneten Elemente den Perspektiveneffekt, nicht das Element selbst. Die Zahl 800px gibt den Abstand des Elements von der Ansicht an. -moz stellt private Eigenschaften des Firefox-Browsers dar, -ms stellt private Eigenschaften des IE-Browsers dar, -webkit stellt private Eigenschaften von Chrome und Safari dar, -o stellt private Eigenschaften des Opera-Browsers dar.

Code kopieren

Der Code lautet wie folgt:

.rw-words span{
white-space:nowrap; //文字不允许换行
overflow:hidden;
}

Stellen Sie die spezifische Einstellung der 45a2772a6b6107b401db3c9b82c049c2-Tag-Position entsprechend der tatsächlichen Situation ein.

Code kopieren

Der Code lautet wie folgt:

.rw-words-1 span{
-webkit-animation: rotateWordsFirst 10s linear infinite 0s;
-o-animation: rotateWordsFirst 10s linear infinite 0s;
-moz-animation: rotateWordsFirst 10s linear infinite 0s;
-ms-animation: rotateWordsFirst 10s linear infinite 0s;
animation:rotateWordsFirst 10s linear infinite 0s;
}

Verwenden Sie hier Animationseffekte! Erstens ist „rotateWordsFirst“ der Name der Animation, „10s“ ist die Zeit, die benötigt wird, bis die gesamte Animation einmal abgeschlossen ist, „linear“ ist die verwendete Zeitkurve und „infinite“ wird unbegrenzt oft wiederholt.

Informationen zur Animationssyntax:

Code kopieren

Der Code lautet wie folgt:

animation: name duration timing-function delay iteration-count direction;

Animationsname: Gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.

animation-duration: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an.

animation-delay: Gibt die Verzögerung an, bevor die Animation startet.

animation-iteration-count: Gibt an, wie oft die Animation abgespielt werden soll (unendliche Rotation)

animation-direction: Gibt an, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll.

Wenn Sie mehr wissen möchten, suchen Sie nach: CSS-Serienanimationi.

Als nächstes eine andere Art von Animation.

Code kopieren

Der Code lautet wie folgt:

.rw-words-2 span{
-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;
-o-animation: rotateWordsFirst 10s ease-in infinite 0s;
-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;
-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;
animation:rotateWordsFirst 10s ease-in infinite 0s;
}

Einfache Erklärung:

Die Beschleunigungsregulierung ist langsam. Ein Übergangseffekt, der mit einer langsamen Geschwindigkeit beginnt, dann schneller wird und dann mit einer langsamen Geschwindigkeit endet. „Ease-In“ gibt einen Übergangseffekt an, der mit einer langsamen Geschwindigkeit beginnt eine langsame Geschwindigkeit; „Ease-In-Out“ gibt einen Übergangseffekt an, der mit einer langsamen Geschwindigkeit beginnt und mit einer langsamen Geschwindigkeit endet. Endübergangseffekt (Sie können diese Effekte ausprobieren)

Ähnlich ist die .rw-words-3 Die Spanne kann auf die gleiche Weise eingestellt werden.

Code kopieren

Der Code lautet wie folgt:

.rw-words span：nth-child(1){
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}

:nth-child(n) selector stimmt mit den zugehörigen Elementen überein zu seinem übergeordneten Element Das N-te untergeordnete Element von , unabhängig vom Typ des Elements. n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Code kopieren

Der Code lautet wie folgt:

.rw-words span:nth-child(n) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
...

Stellen Sie verschiedene Selektoren ein, um eine Anzeigeverzögerung zwischen Text zu erreichen.

Code kopieren

Der Code lautet wie folgt:

@-webkit-keyframes rotateWordsFirst/second {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
//此属性查看animation
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; } //设置不透明级别
20% { opacity: 0; }
100% { opacity: 0; }
}

Keyframes definieren die Zeitleiste für jede Animation, und Sie können Legen Sie eine bestimmte Zeit fest. Wie ist der Status des animierten Elements? Wird mit Animation verwendet.

Schreiben Sie dann die Anpassung für jeden Browser, z. B. -o, -moz, -ms usw.

Zusätzlich zum Animationsattribut können Sie auch die Verwendung des Transformationsattributs ausprobieren, mit dem Effekte wie Drehung und Skalierung von Text und Bildern erzielt werden können. Bei dem oben Gesagten geht es um die Verwendung von reinem CSS, um dynamischen Text zu erzielen Ich hoffe, es kann helfen. Es hilft jedem, den Umgang mit CSS zu erlernen.

Verwandte Empfehlungen:

Methode zur Einstellung der CSS-Textschriftfarbe (CSS-Farbe)

Das obige ist der detaillierte Inhalt vonBeispiele für dynamische Texteffekte mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!