CSS-Bounce-Animationseffekt-CSS-Tutorial-php.cn

CSS-Bounce-Animationseffekt

王林

Freigeben： 2023-08-30 22:21:06

nach vorne

637 Leute haben es durchsucht

CSS 的弹跳动画效果

Der Bounce-Animationseffekt wird verwendet, um Elemente schnell nach oben, rückwärts oder von der Oberfläche weg zu bewegen, nachdem sie getroffen wurden.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um den springenden Animationseffekt zu erzielen –

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: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes bounce {
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
            40% {-webkit-transform: translateY(-30px);}
            60% {-webkit-transform: translateY(-15px);}
         }

         @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-30px);}
            60% {transform: translateY(-15px);}
         }

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

   </head>
   <body>

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

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS-Bounce-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!