Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um springende Animationseffekte zu erzielen

Verwenden Sie CSS, um springende Animationseffekte zu erzielen

WBOYnach vorne: 2023-08-26 16:37:10916Durchsuche

使用 CSS 实现弹跳动画效果

Um den Bounce Out-Animationseffekt mithilfe von CSS zu erzielen, können Sie versuchen, den folgenden Code auszuführen:

Beispiel

Live-Demo

<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 bounceOut {
            0% {
               -webkit-transform: scale(1);
            }
            25% {
               -webkit-transform: scale(.95);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.1);
            }
            100% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
         }
         @keyframes bounceOut {
            0% {
               transform: scale(1);
            }
            25% {
               transform: scale(.95);
            }
            50% {
               opacity: 1;
               transform: scale(1.1);
            }
            100% {
               opacity: 0;
               transform: scale(.3);
            }
         }
         .bounceOut {
            -webkit-animation-name: bounceOut;
            animation-name: bounceOut;
         }

      </style>
   </head>

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

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um springende Animationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Position der Bildlaufleiste mithilfe von CSS?Nächster Artikel：Wie ändere ich die Position der Bildlaufleiste mithilfe von CSS?

In Verbindung stehende Artikel

Mehr sehen