Maison  >  Article  >  interface Web  >  Comment obtenir l'effet de disparition de l'image après son apparition pendant une seconde avec CSS

Comment obtenir l'effet de disparition de l'image après son apparition pendant une seconde avec CSS

WBOY
WBOYoriginal
2021-12-14 11:00:224078parcourir

En CSS, vous pouvez ajouter "l'élément d'image {animation: name time}@keyframes name {0%{opacity:1;}99%{opacity:1;}100%{opacity:0;}}" à l'image Style d'élément, pour obtenir l'effet de disparition de l'image après son apparition pendant une seconde.

Comment obtenir l'effet de disparition de l'image après son apparition pendant une seconde avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment obtenir l'effet de disparition de l'image après son apparition pendant une seconde en CSS

En CSS, vous pouvez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet de disparition de l'image après son apparition pendant une seconde . Grâce à la règle @keyframes, vous pouvez créer une animation.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Contrôlez le style de disparition de l'image en utilisant l'attribut opacité.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            opacity:0;
            animation:fadenum 3s;
        }
        @keyframes fadenum{
          0%{opacity:1;}
          99%{opacity:1;}
          100%{opacity:0;}
}
    </style>
</head>
<body>
    <img src="1118.02.png" alt="">
</body>
</html>

Résultat de sortie :

Comment obtenir leffet de disparition de limage après son apparition pendant une seconde avec CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration:
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