CSS中的動畫效果讓網頁變得更加生動有趣，其中坐標點跳動動畫是很受歡迎的一種效果。坐標點跳動動畫可以使小圖標或文字變得更加立體、生動，引起用戶的注意。

/*定義初始樣式*/
.dots{
position: relative;
display: inline-block;
width: 10px;
height: 10px;
margin: 20px;
}
.dot{
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
/*定義動畫效果*/
@keyframes jump{
50%{
transform: translateY(-20px);
}
}
/*應用動畫 */
.dot:nth-child(1){
background-color: #ff3e41;
left: 0;
animation: jump 1s ease-in-out infinite alternate;
}
.dot:nth-child(2){
background-color: #fff;
left: 20px;
animation: jump 1s ease-in-out 0.2s infinite alternate;
}
.dot:nth-child(3){
background-color: #ffbf38;
left: 40px;
animation: jump 1s ease-in-out 0.4s infinite alternate;
}
.dot:nth-child(4){
background-color: #6be881;
left: 60px;
animation: jump 1s ease-in-out 0.6s infinite alternate;
}

以上代碼中，首先定義初始樣式，包括小圓點的大小、位置等屬性。然后定義動畫效果，使用CSS3的keyframes屬性創建一個跳動的關鍵幀，通過transform屬性實現向上平移。最后，應用動畫效果，通過nth-child選擇器來為每個小圓點添加不同的顏色和時間，實現坐標點跳動的效果。

通過運用以上代碼，我們可以在網頁上實現坐標點跳動的效果，為用戶帶來更加生動、有趣的視覺體驗。同時，這也是我們在實際工作中常常使用的一種常見的動畫效果。