Gunakan CSS untuk mencapai kesan animasi pop timbul di sebelah kanan-tutorial css-php.cn

Gunakan CSS untuk mencapai kesan animasi pop timbul di sebelah kanan

WBOY

Lepaskan： 2023-08-23 21:41:02

ke hadapan

1057 orang telah melayarinya

Gunakan CSS untuk mencapai kesan animasi pop timbul di sebelah kanan

Gunakan CSS untuk mencapai kesan animasi pop timbul di sebelah kanan, anda boleh cuba jalankan kod berikut

Contoh

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

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

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

   </head>
   <body>
      <div id = "animated-example" class = "animated bounceOutRight">>/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 mencapai kesan animasi pop timbul di sebelah kanan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!