PHP前端开发

使用 CSS 实现脉冲动画效果

百变鹏仔 4周前 (09-20) #CSS

文章标签脉冲

要使用CSS创建脉冲效果，您可以尝试运行以下代码

示例

现场演示

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

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客