简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie CSS, um Pulsanimationseffekte zu implementieren

Verwenden Sie CSS, um Pulsanimationseffekte zu implementieren

WBOY
WBOYnach vorne
2023-09-10 10:41:101511Durchsuche

使用 CSS 实现脉冲动画效果

Um mit CSS einen pulsierenden Effekt zu erzeugen, 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 pulse {
            0% { -webkit-transform: scale(1); }
            50% { -webkit-transform: scale(1.1); }
            100% { -webkit-transform: scale(1); }
         }
         @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
         }
         .pulse {
            -webkit-animation-name: pulse;
            animation-name: pulse;
         }
      </style>
   </head>
   <body>
      <div id = "animated-example" class = "animated pulse"></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 Pulsanimationseffekte zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Kann man verhindern, dass Benutzer Screenshots von Webseiten machen?Nächster Artikel：Kann man verhindern, dass Benutzer Screenshots von Webseiten machen?

In Verbindung stehende Artikel

Mehr sehen