最近，在學習CSS的時候，我想實現一個雙色球的動畫效果，非常有趣。今天，我來分享一下如何通過CSS來實現這個動畫效果。

球的樣式如下：
.ball {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f00;
box-shadow: 0px 0px 10px #000;
position: absolute;
top: -20px;
left: -20px;
}
控制球的運動軌跡，需要使用CSS中的animation屬性。我們可以定義兩個關鍵幀來控制球的運動，一個是從開始到達左上角，另一個是從左上角到達右下角。代碼如下：
@keyframes red-ball {
0% {
top: -20px;
left: -20px;
}
50% {
top: -20px;
left: calc(50% - 20px);
}
100% {
top: calc(50% - 20px);
left: calc(50% - 20px);
}
}
@keyframes blue-ball {
0% {
top: calc(50% - 20px);
left: calc(50% - 20px);
}
50% {
top: calc(50% - 20px);
left: -20px;
}
100% {
top: calc(100% - 20px);
left: calc(50% - 20px);
}
}
通過在類中添加animation屬性，將球添加到HTML代碼的div元素中，即可看到紅球從左上角到達中心位置，藍球從底部中心位置到達中心位置的運動效果。代碼如下：
.ball.red {
animation: red-ball 2s linear infinite;
}
.ball.blue {
animation: blue-ball 2s linear infinite;
}

通過這樣的簡單的CSS代碼，我們就可以輕松地實現一個雙色球的動畫效果，非常有趣，你也可以試試哦！