Maison > interface Web > Tutoriel H5 > le corps du texte

Une appréciation graphique et textuelle de 8 superbes effets spéciaux d'animation de texte HTML5

黄舟
Libérer: 2017-03-06 15:41:45
original
3895 Les gens l'ont consulté

Le texte est l'âme des pages Web. Il y a longtemps, quelqu'un a inventé de nombreuses belles polices informatiques, qui donnaient aux pages Web des styles différents. Avec l'émergence du HTML5 et du CSS3, nous pouvons personnaliser le texte. Dans certaines situations, lorsque cela est nécessaire, nous pouvons même utiliser HTML5 pour animer le texte. Cet article partage 8 très beaux effets spéciaux d'animation de texte HTML5, j'espère qu'il pourra être utilisé comme référence pour vous.

1. Animation de texte pliable et retourné en 3D CSS3

Aujourd'hui, nous allons partager une application d'effets spéciaux de texte CSS3. Elle est similaire aux effets de texte HTML5/CSS3 que nous avons partagés auparavant. . Une animation de texte CSS3 3D pliant et retourné. Tant que vous faites glisser la souris sur le texte, l'autre côté du texte peut être retourné comme une page, présentant un effet visuel tridimensionnel. Tout cela est réalisé par CSS3. .

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

2. Effets spéciaux d'animation de texte à effet de particules HTML5 Canvas

Aujourd'hui, nous allez partager un effet de texte basé sur HTML5 Canvas. Entrez le texte que vous souhaitez afficher dans la zone de saisie et appuyez sur Entrée pour dessiner une animation de texte avec des effets de particules sur le canevas.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

3. Effet de texte creux CSS3 3D

Ce que nous allons faire. présenter aujourd'hui Un effet de texte creux basé sur CSS3 Un tel effet de texte creux était difficile à réaliser dans le passé et devait utiliser une image d'arrière-plan. Mais maintenant avec CSS3, cet effet de texte creux est devenu très simple.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

4. Effets spéciaux d'animation de texte de l'effet de particules HTML5

Aujourd'hui, ce que je souhaite partager, c'est également un effet spécial d'animation de texte basé sur des effets de particules HTML5, et il peut réaliser une lecture image par image de chaque texte, formant un poème très romantique.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démonstration en ligne Téléchargement du code source

5. CSS3 pour obtenir un effet de motif d'arrière-plan partiel du texte

Je veux. partager cette fois est un effet de texte implémenté à l'aide de CSS3. Cet effet de texte CSS3 peut personnaliser n'importe quel arrière-plan partiel du texte, de sorte que différentes zones de notre texte puissent définir différentes couleurs et images d'arrière-plan.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

6. Collection d'effets de texte CSS3 époustouflants

Aujourd'hui, nous y allons. à partager Il existe plus d'une douzaine d'effets de texte CSS3 avec différents styles, certains sont des effets de texte 3D, certains ont des ombres de texte en trois dimensions et les couleurs sont également très bonnes. Ces effets de texte CSS3 utilisent de nombreux attributs d'ombre de texte et de filtre. Ce sont ces attributs CSS3 qui rendent le texte ennuyeux en noir et blanc si vivant, même s'il s'agit tous de texte statique.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

7. Effets de texte pour les images d'arrière-plan personnalisées HTML5

En HTML5 et Avant la sortie de la norme CSS3, l’arrière-plan du texte ne pouvait être qu’une couleur unie, sans parler d’une image d’arrière-plan personnalisée. Cependant, le puissant HTML5 permet non seulement à l'arrière-plan du texte de prendre en charge les couleurs dégradées, mais prend également en charge les images d'arrière-plan personnalisées. Ces images sont comme des calques de masque, rendant l'arrière-plan du texte riche et coloré.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source

8. Arrière-plan de texte personnalisé HTML5 pour générer le fichier de signature QQ

Il s'agit d'une application d'arrière-plan de texte personnalisé implémentée en utilisant HTML5. Tout d'abord, nous pouvons saisir le texte qui doit être affiché et sélectionner une image pour le texte. . Image de fond, l’image de fond recouvre le texte comme un masque. Cliquez sur Générer un fichier de signature QQ pour mélanger le texte et l'arrière-plan dans une autre image. Vous pouvez également télécharger cette image avec votre fichier de signature QQ.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux danimation de texte HTML5

Démo en ligne Téléchargement du code source


Ci-dessus sont 8 superbes animations de texte HTML5 Spécial graphiques d'effets et appréciation du texte Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal