小球边界碰撞回弹css

html：

<div class="ball">
    <span>球</span>
</div>

style：

  .ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    //初始化大小和出现位置
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo);
    //颜色
    border-radius: 50%;
    //正方形盒子变成圆
    animation: w_animation 2.5s ease-in-out infinite alternate,
      h_animation 3.2s linear infinite alternate;
  }

  .ball:hover {
    animation-play-state: paused;
    /* 鼠标悬停时暂停动画 */
  }

  @keyframes w_animation {
    to {
      left: calc(100vw - 100px);
    }
    //100vw可视化宽度
  }

  @keyframes h_animation {
    to {
      top: calc(100vh - 100px);
    }
  }

注解：

• animation: 这是一个 CSS 属性，用于指定要应用到元素的动画效果。
• w_animation: 这是动画的名称，可以自定义。在这里，w_animation 是动画的名称标识符。
• 2.5s: 这是动画的持续时间，指定动画完成一个周期所需的时间，这里是 2.5 秒。
• linear: 这是动画的时间函数，表示动画以相同的速度进行。在这里，动画是匀速的。
• ease-in-out 会在动画开始和结束时逐渐加速和减速，而在动画中间阶段会保持一个中等速度。这种效果可以让动画看起来更自然，避免了突然开始或结束时的突兀感。
• infinite: 这是动画播放次数，指示动画应该无限循环播放。
• alternate: 这表示动画应该在每次迭代之间反向播放。动画往复运动，交替进行。

综合起来，这段代码定义了一个名为 w_animation 的动画，持续 2.5 秒，以匀速往复无限次地播放，并且在每次迭代之间交替反向播放。