Verwenden Sie CSS, um springende Animationseffekte zu erzielen-CSS-Tutorial-php.cn

Verwenden Sie CSS, um springende Animationseffekte zu erzielen

WBOY

Freigeben： 2023-08-26 16:37:10

nach vorne

1012 Leute haben es durchsucht

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

Nach dem Login kopieren

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!