在網(wǎng)頁制作的過程中，經(jīng)常需要用到CSS來實現(xiàn)動畫效果。今天，我們就來學(xué)習(xí)一下如何用CSS來制作左右跳動的小球。

.ball {
position: absolute;
width: 30px;
height: 30px;
background-color: #007bff;
border-radius: 50%;
}

首先，我們需要用CSS來添加一個小球的樣式。這里使用了position: absolute;來使小球脫離文檔流并且定位，width和height來設(shè)置小球的大小，background-color來設(shè)置小球的背景顏色，border-radius來設(shè)置小球的圓角。

.container {
position: relative;
width: 300px;
height: 30px;
margin: 0 auto;
}

我們需要在一個容器中來放置這個小球。這里使用了position: relative;來使容器相對定位，width和height來設(shè)置容器的大小，margin: 0 auto;來使容器居中顯示。

.ball {
animation: move 1s infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 250px;
}
100% {
left: 0;
}
}

我們需要使用CSS3中的animation屬性來讓小球?qū)崿F(xiàn)左右跳動的效果。這里使用了animation: move 1s infinite;來設(shè)置動畫的名稱、持續(xù)時間和循環(huán)次數(shù)。我們還需要用@keyframes來設(shè)置動畫的具體效果。

在@keyframes中，我們使用百分比來指定動畫進行到什么程度。在0%到50%階段中，小球會自左向右移動，50%到100%階段中，小球會自右向左移動。這樣，我們就完成了小球的左右跳動效果。