Exemples d'effets de texte dynamiques utilisant du CSS pur

Je pense que tout le monde a vu l'effet moyen sur le site Web. Une fois la page ouverte, le texte et les images changent avec le temps spécifié. Aujourd'hui, nous allons vous présenter comment obtenir cet effet en utilisant du CSS pur. .

Vous pouvez souvent voir des sites Web sympas

Dans de tels sites Web, vous pouvez voir que dès que la page est ouverte, le texte et les images changent avec l'heure spécifiée. Le principe est très simple, utilisant principalement l'attribut animation en CSS.

Ensuite, je prendrai mon projet actuel comme exemple pour réaliser l'effet d'animation de texte et d'images.

Écriture de code HTML :

Copier le code

Le code est le suivant :

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

À l'heure actuelle, le cadre général a été écrit, comprenant une balise section, un span (à ajouter selon les préférences) et une balise h2. Ajoutez-y ensuite du code texte. Mettez le code dans h2.

Copier le code

Le code est le suivant :

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

La première animation de texte HTML.

Copier le code

Le code est le suivant :

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

Le deuxième texte d'animation HTML.

Copiez le code

Le code est le suivant :

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

L'effet de transformation d'image est tel qu'indiqué dans le GIF ci-dessus. Les images glissent de la droite et changent.

ok, maintenant le code HTML est terminé, implémentons maintenant la partie principale : l'animation CSS et le réglage du style de police.

Écriture de code CSS

Copier le code

Le code est comme suit :

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

D'ailleurs, l'attribut perspective définit la distance de l'élément 3D à la vue, en pixels. Lorsque vous définissez l'attribut perspective d'un élément, ses éléments enfants obtiennent l'effet de perspective, et non l'élément lui-même. Le nombre 800px représente la distance de l'élément à la vue. -moz représente les propriétés privées du navigateur Firefox, -ms représente les propriétés privées du navigateur IE, -webkit représente les propriétés privées de Chrome et Safari, -o représente les propriétés privées du navigateur Opera.

Copier le code

Le code est le suivant :

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

Pour le paramètre de position de balise spécifique, définissez-le en fonction de la situation réelle.

Copier le code

Le code est le suivant :

.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;
}

Utilisez les effets d'animation ici ! Premièrement, rotateWordsFirst est le nom de l'animation, 10 s est le temps nécessaire pour que l'animation entière soit terminée une fois, linéaire est la courbe de temps utilisée et infini est répété un nombre illimité de fois.

À propos de la syntaxe de l'animation :

Copier le code

Le code est le suivant :

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

animation-name : spécifie le nom de l'image clé qui doit être liée au sélecteur.

animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.

animation-timing-function : Spécifie la courbe de vitesse de l'animation.

animation-delay : Spécifie le délai avant le début de l'animation.

animation-iteration-count : Spécifie le nombre de fois que l'animation doit être jouée (rotation infinie)

animation-direction : Spécifie si l'animation doit être jouée à l'envers à tour de rôle.

Si vous voulez en savoir plus, recherchez : CSS series animationi.

Ensuite, un autre type d'animation.

Copier le code

Le code est le suivant :

.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;
}

Explication facile :

facilité Spécifie un effet de transition qui commence à une vitesse lente, puis devient plus rapide, puis se termine à une vitesse lente ; easy-in spécifie un effet de transition qui commence à une vitesse lente ; une vitesse lente ; easy-in-out spécifie un effet de transition qui se termine à une vitesse lente. Les effets de transition du début et de la fin (vous pouvez essayer ces effets)

De même, le .rw-words-3 la durée peut être réglée de la même manière.

Copier le code

Le code est le suivant :

.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;
}

 : ntième enfant(n) correspondant au sélecteur lui appartient Le Nième élément enfant de l'élément parent, quel que soit le type de l'élément. n peut être un nombre, un mot-clé ou une formule.

Copiez le code

Le code est le suivant :

.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;
}
...

Définissez différents sélecteurs pour réaliser la sélection entre texte Délai d'affichage.

Copiez le code

Le code est le suivant :

@-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 définit la timeline de chaque animation, et vous pouvez définir un certain état. Dans quel état l'élément est-il animé à ce moment-là ? Utilisé avec l'animation.

Écrivez ensuite l'adaptation pour chaque navigateur, comme -o, -moz, -ms, etc.

En plus de l'attribut animation, vous pouvez également essayer d'utiliser l'attribut transform, qui peut obtenir des effets tels que la rotation et la mise à l'échelle du texte et des images. Ce qui précède consiste à utiliser du CSS pur pour obtenir du texte dynamique. effets. J'espère que cela peut aider. Cela aide tout le monde à apprendre à utiliser CSS.

Recommandations associées :

Méthode de définition de la couleur de la police de texte CSS (couleur CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!