CSS memudar kesan animasi

WBOY

Lepaskan： 2023-09-16 09:57:02

ke hadapan

764 orang telah melayarinya

CSS memudar kesan animasi

Untuk mencapai kesan animasi pudar pada imej menggunakan CSS, anda boleh cuba menjalankan kod berikut -

Contoh

Live Demo

<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 fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>
   </head>
   <body>
      <div id="animated-example" class="animated fadeOut"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci CSS memudar kesan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：tutorialspoint.com

Artikel sebelumnya：Elemen kedudukan CSS Artikel seterusnya：Bagaimana untuk menyelaraskan penomboran dalam Bootstrap 4?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang