Rumah > Artikel > hujung hadapan web > Gunakan CSS untuk pudar dalam kesan animasi kiri

Gunakan CSS untuk pudar dalam kesan animasi kiri

WBOYke hadapan: 2023-09-17 14:29:101022semak imbas

使用 CSS 淡入左侧动画效果

Untuk mencapai kesan animasi fade-in dari sebelah kiri menggunakan CSS pada imej, anda boleh cuba menjalankan kod berikut −

# 🎜🎜#Contoh

demonstrasi masa nyata

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

         @keyframes fadeInLeft {
            0% {
               opacity: 0;
               transform: translateX(-20px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

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

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

   </body>
</head>

Atas ialah kandungan terperinci Gunakan CSS untuk pudar dalam kesan animasi kiri. 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：Tambahkan warna latar belakang untuk membentuk input menggunakan CSSArtikel seterusnya：Tambahkan warna latar belakang untuk membentuk input menggunakan CSS

Artikel berkaitan

Lihat lagi