Comment utiliser CSS pour obtenir un effet de glissement de texte de bouton

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

Interprétation du code

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!