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

Verwenden Sie CSS, um springende Animationseffekte zu erzielen

王林

Freigeben： 2023-08-28 17:09:06

nach vorne

1302 Leute haben es durchsucht

使用 CSS 实现动画效果的弹跳

Um mit CSS einen Sprungeffekt in der Animation 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 bounceIn {
            0% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.05);
            }
            70% {
               -webkit-transform: scale(.9);
            }
            100% {
               -webkit-transform: scale(1);
            }
         }

         @keyframes bounceIn {
            0% {
               opacity: 0;
               transform: scale(.3);
            }
            50% {
               opacity: 1;
               transform: scale(1.05);
            }
            70% {
               transform: scale(.9);
            }
            100% {
               transform: scale(1);
            }
         }

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

   </head>
   <body>

      <div id="animated-example" class="animated bounceIn"></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!