css3hideshow

CSS3 Hide Show

CSS3 est la dernière norme CSS, qui nous offre plus de choix de style et de contrôles, dont l'un est le contrôle de masquage et d'affichage des éléments. Dans cet article, nous expliquerons comment masquer et afficher des éléments à l'aide de CSS3 et où cette technique peut être bénéfique.

Il existe quatre propriétés d'affichage en CSS3 : none, block, inline et inline-block. Les plus couramment utilisés sont aucun et bloc. none signifie masquer complètement l'élément et block signifie afficher l'élément dans un bloc sur l'écran.

Pour obtenir un effet masquer et afficher, nous devons utiliser ces propriétés d'affichage en combinaison avec d'autres propriétés en CSS3. Voici quelques propriétés qui vous permettront de mieux réaliser ces effets :

display:none : Masquer complètement l'élément. Lorsqu'un élément est défini sur cette propriété, il ne sera pas affiché sur la page.

display:block : affiche les éléments à l'écran sous forme de bloc. Cette propriété est généralement utilisée pour faire réapparaître des éléments masqués à l'écran.

visibility:hidden : Masque l'élément, mais l'espace qu'il occupe existe toujours. Cet attribut est généralement utilisé lorsque la mise en page d'origine doit être conservée pour éviter des problèmes de mise en page.

visibility:visible : Rendre l'élément visible. Cette propriété rend l'élément à nouveau visible après l'avoir masqué.

opacity:0 : Rendre l'élément transparent, cachant ainsi l'élément. Cette propriété est généralement utilisée lorsque des effets de lissage/fondu sont requis.

opacité:1 : Réinitialise la transparence à la valeur normale (1) afin que l'élément puisse être revu et que les autres éléments puissent être affichés normalement.

transition : toutes les 0,5 s facilité : définissez le temps de transition des changements d'attributs de style sur une demi-seconde (0,5s) et définissez son effet de transition sur "facilité". Cette propriété est couramment utilisée pour créer des effets de transition CSS fluides.

Ensuite, nous utiliserons des exemples pour montrer comment utiliser les propriétés ci-dessus pour obtenir des effets de masquage et d'affichage.

Tout d'abord, nous utilisons l'attribut display:none pour masquer complètement un élément, comme ceci :

.hide-me{
    display:none;
}

Cela masquera les éléments de classe "hide-me".

Nous pouvons ensuite restaurer l'affichage de cet élément en utilisant display:block ou display:inline-block comme indiqué ci-dessous :

.show-me{
    display:block;
}

Cela définira l'élément avec la classe "show-me" comme élément de niveau bloc et le fera réapparaître sur l'écran.

Ensuite, nous pouvons utiliser visibilité:hidden pour masquer l'élément, mais l'espace qu'il occupe est toujours là, comme indiqué ci-dessous :

.hide-me{
    visibility:hidden;
}

Cela masquera l'élément avec la classe "hide-me" et le rendra visible sur la page occupe toujours le même espace dans la mise en page.

Nous pouvons ensuite utiliser visibilité:visible pour cesser de masquer l'élément et le faire réafficher, comme ceci :

.show-me{
    visibility:visible;
}

Cela fera réafficher l'élément avec la classe "show-me" sur la page.

Si vous avez besoin d'un effet de transition plus fluide, vous pouvez utiliser l'attribut d'opacité comme ceci :

.hide-me{
    opacity:0;
    transition:all 0.5s ease;
}

Cela définira les éléments avec la classe "hide-me" sur transparent et définira le temps de transition pour les changements de style à une demi-seconde (0,5 s). , et définissez l'effet de transition sur "facilité".

Enfin, vous pouvez utiliser opacity:1 et transition:all 0,5s pour mettre fin au masquage et montrer l'élément à l'utilisateur comme ceci :

.show-me{
    opacity:1;
    transition:all 0.5s ease;
}

Cela rendra l'élément avec la classe "show-me" opaque et en fondu en douceur en une demi-seconde.

Résumé :

CSS3 fournit une série de propriétés qui nous permettent de mieux contrôler les effets de masquage et d'affichage des éléments. Différents attributs correspondent généralement à différents scénarios d'application, qui peuvent impliquer la conception Web, la conception d'effets visuels et la conception de l'expérience utilisateur. L'effet de masquage/affichage d'éléments peut optimiser les capacités de conception de la plupart de nos produits et services tout en rendant notre site Web ou notre interface utilisateur plus interactifs et visuels.

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!