CSS實(shí)現(xiàn)下落的球效果

在CSS中，我們可以使用動(dòng)畫(huà)（animation）來(lái)實(shí)現(xiàn)下落的球效果，以下是一個(gè)簡(jiǎn)單的示例：

1、我們需要?jiǎng)?chuàng)建一個(gè)HTML元素，例如一個(gè)div，來(lái)代表我們的球。

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

2、我們可以使用CSS來(lái)定義球的下落動(dòng)畫(huà)，這里我們使用了一個(gè)簡(jiǎn)單的線性動(dòng)畫(huà)，讓球從頂部開(kāi)始，然后沿著Y軸下落。

.ball {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  animation: fall 2s linear infinite;
}
@keyframes fall {
  from { top: 0; }
  to { top: 100vh; }
}

在這個(gè)示例中，我們使用了position: absolute;來(lái)讓球脫離文檔流，并使其能夠自由下落。top: 0;和left: 50%;配合transform: translateX(-50%);一起使用，可以讓球從屏幕中央開(kāi)始下落。width和height定義了球的大小，background-color設(shè)置了球的顏色，border-radius: 50%;讓球成為一個(gè)***的圓形，我們使用了一個(gè)名為fall的動(dòng)畫(huà)，讓球從頂部開(kāi)始，沿著Y軸下落，直到達(dá)到視口的底部（100vh），這個(gè)動(dòng)畫(huà)是無(wú)限循環(huán)的（infinite），所以球會(huì)不斷地下落。