Explication détaillée de l'animation de transition CSS3 de la barre de menu 'trois' se transformant en 'X'

J'ai récemment voulu imiter une page, et l'un des effets est l'effet des trois barres de menu se transformant en

Image (1) Effet initial

Image (2) Effet de survol de la souris

Idée :

Mise en œuvre de trois lignes horizontales

 : Traditionnellement, cela peut être réalisé avec 3 balises span, mais il existe un moyen plus intelligent. Une balise peut obtenir l'effet trois horizontaux. Selon Maître Zhang Xinxu, il a partagé l'idée d'utiliser un remplissage pour obtenir l'effet de trois avec une seule étiquette. Le principe général est d'utiliser respectivement border-top, background et border-bottom pour les lignes horizontales supérieure, médiane et inférieure. Utilisez background-clip: content-box pour couper, et enfin utilisez le remplissage pour agrandir de haut en bas afin d'obtenir l'effet visuel de trois lignes horizontales,

Implémentation X : et le X déformé Il n'y a pas besoin d'étiquettes supplémentaires, et il est implémenté en utilisant sa propre rotation et son décalage de transformation de pseudo-classe après avant. Il faut de la patience pour ajuster l'angle. Il convient de noter que l'utilisation du remplissage pour obtenir l'effet à trois horizontaux n'est pas très sensible au déclenchement. Il est préférable d'envelopper la balise d'icône avec une étiquette et de le faire sur le calque d'emballage : survoler le déclencheur

Ce qui suit est le code

Plus de barre de menu "trois" se transforme en animation de transition CSS3 "X" pour une explication détaillée Veuillez payer. attention au site PHP chinois pour les articles connexes !