Comment transitionr les propriétés CSS «afficher» + «opacité»

Dans CSS, la transition fait référence à une méthode pour contrôler la vitesse de l'élément ajouté lors de l'application des propriétés CSS. Plus précisément, vous pouvez effectuer diverses transitions, y compris les transitions de pages, les transitions d'image, le texte et bien d'autres. Vous pouvez spécifier les modifications à appliquer après une période de temps spécifique, au lieu de faire en sorte que les modifications de propriété prennent effet immédiatement.

Ce message explique la méthode de définition de la transition à l'aide de CSS "afficher" et "opacité" Propriétés.

Comment faire la transition des propriétés CSS «Afficher» et «Opacité»?

À la transition CSS "afficher" et "opacité«Les propriétés, tout d'abord, font un conteneur div avec le«" élément. Ensuite, accédez au conteneur Div et ajoutez une image d'arrière-plan à l'aide du «image de fond" propriété. Après cela, définissez le «transition","opacité», Et d'autres propriétés requises en fonction de votre choix.

Étape 1: Créez un conteneur «div»

Initialement, faites un conteneur div avec l'aide du «»Conteneur et ajoutez un attribut de classe avec un nom particulier. Pour ce faire, nous avons fixé le nom de la classe comme «article»:

Étape 2: Définissez la propriété «Affichage»

Ensuite, accédez au conteneur div en utilisant le nom de classe «principale"Et définissez le"afficher" propriété:

.MAIN-ITEM
bloc de visualisation;

Ici, la valeur du «afficher«La propriété est définie comme«bloc"Pour prendre toute la largeur de l'écran.

Étape 3: Ajouter une image d'arrière-plan

Ensuite, appliquez les propriétés CSS suivantes sur le conteneur DIV accessible:

.MAIN-ITEM
hauteur: 400px;
Largeur: 400px;
Image de fond: URL (Spring-Flowers.jpg);
Opacité: 0.1;
Transition: Opacité 2S Factual-Out;
marge: 30px 50px;

Dans l'extrait de code indiqué ci-dessus:

• "hauteur" et "largeur»Propriétés déterminez la taille de l'élément défini.
• "image de fond«La propriété CSS est utilisée pour insérer une image à l'aide du«URL ()”Fonction à l'arrière de l'élément.
• "opacité»Détermine le niveau d'opacité pour un élément. Le niveau d'opacité démontre le niveau de transparence, où ««1"Est utilisé sans transparence, et"0.5" est pour "50%" transparence.
• "transition"Dans CSS, les utilisateurs modifient en douceur les valeurs des propriétés sur une durée donnée.
• "marge»Définit l'espace à l'extérieur de la limite définie autour d'un élément.

Sortir

Étape 4: Appliquer «: Hover» Pseudo Selector

Maintenant, accédez au conteneur div le long du «:flotter”Pseudo Selector qui est utilisé pour sélectionner des éléments lorsque nous volons la souris sur eux:

.MAIN-ITEM: Hover
Opacité: 1;

Ensuite, définissez le "opacité«De l'élément sélectionné comme«1«Pour supprimer la transparence.

Sortir

Il s'agit de définir les propriétés «affichage» et «opacité» de transition CSS et «Opacité».

Conclusion

Pour définir les propriétés «Affichage» et «Opacité» de transition, faites d'abord un conteneur div en utilisant l'élément. Ensuite, accédez à l'élément div et définissez "afficher" comme "bloc". Après cela, appliquez les autres propriétés CSS, notamment «image de fond«Pour insérer une image dans le conteneur,« transition »,« opacité »et autres. Ce message a expliqué la méthode de définition de la transition avec CSS "afficher" et "opacité" propriétés.