Gunakan CSS untuk pudar dalam kesan animasi yang betul-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Gunakan CSS untuk pudar dalam kesan animasi yang betul

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 pm 12:05 PM

使用 CSS 淡入右侧动画效果

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

Contoh

Demo Langsung

<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 fadeInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }
         @keyframes fadeInRight {
            0% {
               opacity: 0;
               transform: translateX(20px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

         .fadeInRight {
            -webkit-animation-name: fadeInRight;
            animation-name: fadeInRight;
         }
      </style>

   </head>
   <body>

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

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

   </body>
</html>

Atas ialah kandungan terperinci Gunakan CSS untuk pudar dalam kesan animasi yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Popovers boleh diguna semula untuk menambah sedikit popApr 17, 2025 am 11:02 AM

Popover adalah pandangan sementara yang muncul di atas kandungan pada skrin apabila pengguna mengklik pada butang kawalan atau dalam kawasan yang ditetapkan. Contohnya,

Pautan gaya dengan garis bawah sebenarApr 17, 2025 am 10:57 AM

Sebelum kita datang ke cara menggariskan gaya, kita harus menjawab soalan: Sekiranya kita menggariskan?

Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow DomApr 17, 2025 am 10:55 AM

Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC

Multiplayer Tic Tac Toe Dengan GraphqlApr 17, 2025 am 10:54 AM

GraphQL adalah bahasa pertanyaan untuk API yang sangat memberdayakan untuk pemaju depan. Seperti laman grafql menerangkannya, anda menerangkan data anda, minta apa

Operasi logik dengan pembolehubah CSSApr 17, 2025 am 10:44 AM

Sering kali, semasa menggunakan pembolehubah suis (pembolehubah yang sama ada 0 atau 1, konsep yang dijelaskan secara terperinci dalam jawatan ini), saya harap saya dapat

LOAD LOAD Video YouTube TerbenamApr 17, 2025 am 10:40 AM

Ini adalah idea yang sangat bijak melalui Arthur Corenzan. Daripada menggunakan embed YouTube lalai, yang menambah crapload sumber ke halaman sama ada pengguna bermain

Bolehkah anda memutar kursor dalam CSS?Apr 17, 2025 am 10:28 AM

Kinda! Tidak ada cara yang mudah atau standard untuk melakukannya, tetapi ia mungkin. Anda boleh menukar kursor ke versi asli terbina dalam yang berbeza dengan CSS dengan

Menu hamburger dengan sisi cangkuk reaksi dan komponen gayaApr 17, 2025 am 10:21 AM

Kita semua tahu apa menu hamburger, bukan? Apabila corak mula masuk ke dalam reka bentuk web, ia kedua -duanya dihina dan bertepuk tangan kerana minimalisnya

See all articles