Maison > interface Web > tutoriel CSS > le corps du texte

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

不言
Libérer: 2018-07-10 15:59:36
original
2762 Les gens l'ont consulté

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>
Copier après la connexion

Bouton centré :

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
Copier après la connexion

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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%);
}
Copier après la connexion

Utiliser des pseudo- éléments pour ajouter une copie de chaque lettre :

.box span::before {
    content: attr(data-text);
    position: absolute;
    color: red;
}
Copier après la connexion

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%);
}
Copier après la connexion

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;
}
Copier après la connexion

Enfin, masquez le contenu à l'extérieur du conteneur :

.box {
    overflow: hidden;
}
Copier après la connexion

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!

É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