Avec la popularité des pages et des applications Web modernes, de nombreuses personnes ont commencé à essayer d'utiliser divers effets sympas pour ajouter plus d'interactions et d'effets visuels aux pages Web. L’un de ces effets est le retournement des polices. En utilisant la bibliothèque jQuery, nous pouvons facilement obtenir cet effet.
Dans cet article, je vais vous montrer comment utiliser jQuery pour obtenir un effet de retournement de texte et comment l'appliquer à votre site Web.
Étape 1. Créer une structure HTML
Tout d'abord, nous devons créer la structure HTML de base. Nous créons un conteneur DIV et y ajoutons deux balises SPAN, une avec un contenu texte « front » et l'autre avec un contenu texte « inverse ». Voici le code requis :
<div class="flipper">
<span class="front">正面</span>
<span class="back">反面</span>
</div></p>
<p></div><br></body><br></html></p>
<p>Étape 2. Créer des styles CSS</p>
<p>Nous avons également besoin de certains styles CSS pour définir les styles du conteneur DIV et des balises SPAN. Voici le code CSS requis: </p>
<p>.flip-contrainer {</p>
<pre class="brush:php;toolbar:false">perspective: 1000px;
position: relative;
width: 200px;
height: 150px;
margin: 0 auto;Copier après la connexion
}
.flipper {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
Copier après la connexion
}
.front, .back {
position: absolute;
width: 100%;
height:100%;
Copier après la connexion
}
.front {
font-size:48px;
text-align: center;
background-color: #fff;
Copier après la connexion
}
.back {
font-size: 48px;
text-align: center;
background-color: #000;
color: #fff;
transform: rotateY(180deg);
Copier après la connexion
}
En CSS, nous définissons deux classes : flip-container et flipper. Le style du flip-conteneur définit la largeur et la hauteur du conteneur, ainsi que les attributs de perspective requis pour ajouter un effet de rotation 3D. Le style du flipper définit les propriétés de position, de largeur, de hauteur et de style de transformation du conteneur requises pour l'effet de rotation 3D.
De plus, nous définissons également deux classes SPAN : recto et verso. Le style de la classe front définit la disposition du texte au recto et la couleur d'arrière-plan. Le style de la classe back définit la disposition, la couleur d'arrière-plan, la couleur de la police et l'effet de rotation du texte au verso.
Étape 3. Écrire du code jQuery
Maintenant, nous allons utiliser la bibliothèque jQuery pour écrire du code afin d'obtenir l'effet de retournement de texte. Nous utiliserons la méthode .hover() de jQuery, qui se déclenche lorsque la souris survole un élément. Dans cet exemple, nous ajouterons une classe appelée flip à l'élément flipper lorsque la souris passera dessus.
Ce qui suit est le code jQuery :
$(".flipper").hover(function(){
$(this).addClass("flip");
});
Le code ci-dessus signifie que lorsque la souris survole Lors de l'arrêt sur l'élément flipper, c'est-à-dire lors de l'exécution de la fonction de survol, la classe flip sera ajoutée à l'élément flipper. Cela fera pivoter le conteneur DIV de 180 degrés et affichera le contenu du texte sur le côté opposé.
Étape 4. Testez votre code
Maintenant, nous pouvons exécuter la page Web et tester l'effet. Lorsque nous passons la souris sur le conteneur DIV, le conteneur se retournera vers l'arrière, affichant le contenu du texte au verso.
Il s'agit de l'effet d'inversion de police obtenu grâce à la bibliothèque jQuery. Vous pouvez modifier le code HTML, CSS et jQuery selon vos besoins pour obtenir de meilleurs résultats.
Résumé
Cet article vous montre comment utiliser jQuery pour obtenir un effet d'inversion de police. En créant une structure HTML, des styles CSS et du code jQuery, nous pouvons facilement ajouter cet effet sympa à nos pages Web. J'espère que cet article vous aidera ! 🎜
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
