css两个小球自由落体

CSS可以实现很多有趣的效果，比如模拟物理世界的运动规律。下面我们来看一下如何用CSS实现两个小球自由落体。

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

.ball1 {
  left: 200px;
}

.ball2 {
  left: 300px;
}

@keyframes fall {
  0% {
    top: 0;
  }
  100% {
    top: 500px;
  }
}

.ball1 {
  animation: fall 2s infinite alternate;
  animation-timing-function: ease-in-out;
}

.ball2 {
  animation: fall 2s 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
} 

首先我们定义了两个.ball类的样式，用来作为小球的基本样式。其中，我们设置了它们的宽高、圆角和背景颜色，并将它们定位为绝对位置。

接着，我们定义了.ball1和.ball2两个类，分别用来控制两个小球的水平位置。通过设置它们的left属性，我们将它们分别放置在200px和300px的位置上。

最后，我们使用@keyframes关键字来定义一个名为fall的动画，用来模拟小球自由落体的运动过程。我们设置它的关键帧分别为0%和100%时，小球的top属性分别为0和500px，并在球触地后立即反弹回去。这样我们就完成了模拟小球下落运动的效果。

在.ball1和.ball2的样式中，我们使用了animation属性来应用动画，将它们分别赋为fall动画，并设置了动画的持续时间为2s、重复次数为无限次、反向播放，并在.ball2上加了0.5s的延时，让两个小球的运动轨迹错开。

这样，我们就完成了两个小球自由落体的模拟效果。通过改变小球的初始位置和动画属性，我们还可以实现更多有趣的运动效果。希望这篇文章能够对大家有所帮助。