弹动

小森呀

于 2021-04-12 00:02:36 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏：小案例

本文链接：https://blog.youkuaiyun.com/KEY2018/article/details/115610019

小案例专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>弹动</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border-radius: 100%;
        margin: 200px auto;
        background-color: lightblue;
        animation: tandong 1s infinite;
      }
      @-webkit-keyframes tandong {
        0% {
          transform: scale(1, 1);
        }
        10% {
          transform: scale(1.09, 0.91);
        }
        20% {
          transform: scale(1, 1);
        }
        30% {
          transform: scale(1.07, 0.93);
        }
        40% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.05, 0.95);
        }
        60% {
          transform: scale(1, 1);
        }
        77% {
          transform: scale(1.03, 0.97);
        }
        80% {
          transform: scale(1, 1);
        }
        90% {
          transform: scale(1.01, 0.99);
        }
        100% {
          transform: scale(1, 1);
        }
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>