search

Home  >  Article  >  Web Front-end  >  Use CSS to implement pulse animation effects

Use CSS to implement pulse animation effects

WBOY
WBOYforward
2023-09-10 10:41:101512browse

使用 CSS 实现脉冲动画效果

To create a pulsing effect using CSS, you can try running the following code

Example

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>

The above is the detailed content of Use CSS to implement pulse animation effects. For more information, please follow other related articles on the PHP Chinese website!

css
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Is it possible to prevent users from taking screenshots of web pages?Next article：Is it possible to prevent users from taking screenshots of web pages?

Related articles

See more