cari

Rumah  >  Artikel  >  hujung hadapan web  >  Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan

Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan

王林
王林ke hadapan
2023-08-31 12:33:03697semak imbas

使用 CSS 淡入右侧大动画效果

Untuk mencapai kesan animasi pudar-kanan menggunakan CSS pada imej, anda boleh cuba menjalankan 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 fadeInRightBig {
            0% {
               opacity: 0;
               -webkit-transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }

         @keyframes fadeInRightBig {
            0% {
               opacity: 0;
               transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

      <div id="animated-example" class="animated fadeInRightBig"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</head>

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

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menentukan kebergantungan media untuk helaian gaya CSSArtikel seterusnya：Bagaimana untuk menentukan kebergantungan media untuk helaian gaya CSS

Artikel berkaitan

Lihat lagi