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

文章推荐

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

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

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