Cet article présente principalement comment utiliser CSS pour réaliser l'effet spécial du glissement du texte d'un bouton. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer au téléchargement du code source
Veuillez télécharger à partir du téléchargement github.
https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects
Définissez dom, définissez le texte du bouton dans un conteneur, un span pour chaque lettre, chaque span a un attribut data-text, sa valeur est la même que la lettre dans le span :
<p class="box"> <span data-text="B">B</span> <span data-text="U">U</span> <span data-text="T">T</span> <span data-text="T">T</span> <span data-text="O">O</span> <span data-text="N">N</span> </p>
Bouton centré :
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
Définissez la taille et le style de texte du bouton :
.box { width: 200px; height: 60px; border: 2px solid black; text-align: center; font-size: 30px; line-height: 60px; font-family: sans-serif; }
Chaque lettre du bouton est définie comme un élément de bloc en ligne afin que l'animation puisse être défini individuellement :
.box span { display: inline-block; color: blue; }
Afficher les lettres décalées à l'extérieur du conteneur de boutons, avec les éléments impairs en haut et les éléments pairs en bas :
.box span:nth-child(odd) { transform: translateY(-100%); } .box span:nth-child(even) { transform: translateY(100%); }
Utiliser des pseudo- éléments pour ajouter une copie de chaque lettre :
.box span::before { content: attr(data-text); position: absolute; color: red; }
Que les lettres du pseudo-élément soient également affichées de manière entrelacée, avec la position par rapport à son élément d'origine :
.box span:nth-child(odd)::before { transform: translateY(100%); } .box span:nth-child(even)::before { transform: translateY(-100%); }
Ajoutez un style de survol de la souris au bouton et définissez le temps d'assouplissement pour le rendre efficace. Effet d'animation :
.box:hover span { transform: translateY(0); } .box span { transition: 0.5s; }
Enfin, masquez le contenu à l'extérieur du conteneur :
.box { overflow: hidden; }
Vous avez terminé !
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
CSS3 pour réaliser une disposition verticale du texte
Introduction au CSS pour créer des styles d'arrière-plan à rayures pour les pages Web
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!