CSS小球左右跳動(dòng)效果實(shí)現(xiàn)

在CSS中，我們可以使用@keyframes規(guī)則來(lái)創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)小球左右跳動(dòng)的效果，以下是一個(gè)簡(jiǎn)單的示例：

1、我們需要定義一個(gè)動(dòng)畫關(guān)鍵幀：

@keyframes jump {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

在這個(gè)關(guān)鍵幀中，我們定義了小球從左側(cè)移動(dòng)到右側(cè)，然后再返回左側(cè)的過程。transform: translateX()屬性用于控制小球的水平移動(dòng)。

2、我們需要將這個(gè)動(dòng)畫應(yīng)用到一個(gè)元素上，假設(shè)我們有一個(gè)名為.ball的類，我們可以這樣寫：

.ball {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  animation: jump 2s infinite;
}

在這個(gè)樣式中，我們定義了小球的大小、顏色和位置。animation屬性用于應(yīng)用我們之前定義的jump動(dòng)畫，2s表示動(dòng)畫的持續(xù)時(shí)間，infinite表示動(dòng)畫將無(wú)限次重復(fù)。

3、我們需要在HTML中添加一個(gè)對(duì)應(yīng)的元素：

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

這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的CSS小球左右跳動(dòng)的效果，你可以根據(jù)自己的需求調(diào)整動(dòng)畫的關(guān)鍵幀和樣式，從而實(shí)現(xiàn)更豐富的效果。