cari

Rumah >hujung hadapan web >tutorial css >Gunakan CSS untuk pudar dalam kesan animasi yang betul

Gunakan CSS untuk pudar dalam kesan animasi yang betul

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBke hadapan
2023-08-26 12:05:111088semak imbas

使用 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!

css
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ciri media pertuturan CSS Speak-asArtikel seterusnya：Ciri media pertuturan CSS Speak-as

Artikel berkaitan

Lihat lagi