怎样可以在鼠标点到篮球的时候呈现缩放旋转状态，然后松开之后球可以不要再弹跳。



.ball{
            width:200px;
            height:200px;
            top:50%;
            transform:translateY(-100px) ;
            border-radius:200px;
            background:url("作业相关资料/images/篮球.jpeg") no-repeat;
            background-size: contain;
            position:absolute;
            animation: ball1 3s linear;
        }
        @keyframes ball1{
            0%{
                top:50%;
                left:0px;
                transform:translateY(-100px);
            }
            20%{
                top:100%;
                left:200px;
                transform:translateY(-200px);
            }
            50%{
                top:0%;
                left:400px;
                transform:translateY(0px);
            }
            100%{
                top:50%;
                left:0px;
                transform:translateY(-100px);
            }
        }
        @keyframes ball2{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg) scale(0.6);
            }
        }
        .ball:hover{
            animation: ball2 2s linear infinite;
        }

参考一下

<style>
  #basketball {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s;
  }

  #basketball.scaling {
    transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
  }

  #basketball.bouncing {
    animation: bounce 1s;
    animation-fill-mode: forwards;
    pointer-events: none;
  }

  @keyframes bounce {
    0% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
    50% {
      transform: translate(-50%, -50%) scale(0.8) rotate(0);
    }
    100% {
      transform: translate(-50%, -50%) scale(0.8) rotate(0);
    }
  }
</style>

<div id="basketball"></div>

<script>
  const basketball = document.getElementById('basketball');
  let bouncing = false;

  basketball.addEventListener('mousedown', function() {
    basketball.classList.add('scaling');
  });

  basketball.addEventListener('mouseup', function() {
    basketball.classList.remove('scaling');

    if (!bouncing) {
      bouncing = true;
      basketball.classList.add('bouncing');
    }
  });
</script>

以下代码保存成html文件直接运行可以跑通

<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Basketball</title>
    <style>
        #basketball {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            position: relative;
            animation: bounce 2s ease-out infinite;
        }

        @keyframes bounce {
            0% {
                top: 0;
                transform: scale(1);
            }
            50% {
                top: 300px;
                transform: scale(0.8);
            }
            100% {
                top: 0;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div id="basketball"></div>

    <script>
        var basketball = document.getElementById("basketball");

        basketball.addEventListener("mousedown", function() {
            basketball.style.transform = "scale(1.2) rotate(45deg)";
            basketball.style.animation = "none";
        });

        basketball.addEventListener("mouseup", function() {
            basketball.style.transform = "scale(1) rotate(0deg)";
            basketball.style.animation = "";
        });
    </script>
</body>
</html>

这个示例中，使用了HTML、CSS和JavaScript来实现一个具有动画效果的篮球。篮球在页面加载时就开始弹跳，并且在鼠标按下时呈现缩放和旋转状态，而在鼠标松开时停止弹跳。

注意，这里没有使用真实的篮球图片，而是使用CSS模拟的一个圆形球体，可以根据需求进行调整。另外，在松开鼠标时需要将篮球的 animation 属性重新赋值为空字符串，才能停止弹跳动画。

同时，为了让篮球不再弹跳，我们需要将 animation 属性重新赋值为空字符串，而非像之前一样设置为 “none”。这是因为在上一次弹跳结束后，篮球的 animation 属性已经被赋值为 “none”，再次设置为 “none” 是无效的。