js之小球曲线运动

最新推荐文章于 2022-07-13 08:05:27 发布

JQ...

最新推荐文章于 2022-07-13 08:05:27 发布

阅读量334

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42201272/article/details/106268683

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .content {
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        position: relative;
      }
      .ball {
        position: absolute;
        top: 0;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: blue;
        border-radius: 50%;
        animation: moveY 0.4s 1 linear,
          moveX 0.4s 1 cubic-bezier(0.19, 0.83, 1, 1);
        animation-fill-mode: forwards;
      }
      @keyframes moveY {
        0% {
          top: 0;
        }
        100% {
          top: 480px;
        }
      }
      @keyframes moveX {
        0% {
          transform: scale(1);
          right: 0;
        }
        100% {
          transform: scale(0.5);
          right: 480px;
        }
      }
    </style>
    <button id="start">开始</button>
    <button>结束</button>
    <div class="content"></div>
    <script>
      var ball = document.querySelector(".ball");
      var start = document.getElementById("start");
      var content = document.querySelector(".content");
      start.onclick = function () {
        var div = document.createElement("div");
        div.className = "ball";
        content.appendChild(div);
        setTimeout(function () {
          content.removeChild(div);
        }, 400);
      };
    </script>
  </body>
</html>