Maison > Article > interface Web > Effet de fondu en animation à l'aide de CSS

Effet de fondu en animation à l'aide de CSS

王林avant: 2023-08-26 08:17:091515parcourir

使用 CSS 淡入动画效果

Pour obtenir un effet d'animation de fondu entrant sur une image à l'aide de CSS, vous pouvez essayer d'exécuter le code suivant -

Exemple

Démo en direct

<html>
   <head>
      <style>

         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

         .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
         }
      </style>
   </head>
   <body>

      <div id="animated-example" class="animated fadeIn"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

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!

css

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisez CSS pour définir si la ponctuation peut être placée en dehors des zones de ligneArticle suivant：Utilisez CSS pour définir si la ponctuation peut être placée en dehors des zones de ligne

Articles Liés

Voir plus