Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan-tutorial css-php.cn

Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan

王林

Lepaskan： 2023-08-31 12:33:03

ke hadapan

701 orang telah melayarinya

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

Salin selepas log masuk

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!