CSS3小球直線運動

.ball{
width:50px;
height:50px;
background-color:red;
border-radius:50%;
position:absolute; 
left:0px;
top:0px;
animation: move 2s infinite linear;
}
@keyframes move{
to {
left:500px;
top:500px;
}
}

在CSS3中，使用關鍵幀動畫（keyframes）可以輕松地實現小球的直線運動效果。我們可以定義一個 class 為 ball 的元素，利用 animation 屬性來指定運動的方式和時間，再通過關鍵幀規則（@keyframes）定義小球位置的變化過程。

具體來說，我們為 ball 元素指定寬度、高度、背景色等基本樣式，然后將其 position 屬性值設為 absolute，讓它可以自由定位。接著在關鍵幀規則中定義小球從起點移動到終點的過程，最后在 ball 元素的 animation 屬性中指定動畫名稱 move、持續時間 2 秒、無限循環、線性運動效果。

代碼中的 move 關鍵幀表示小球從起點（left: 0; top: 0;）移動到終點（left: 500px; top: 500px;），運動的時間間隔為 2 秒，運動方式為線性，即勻速運動。我們可以根據需要調整小球的起點、終點和運動時間，實現不同的直線運動效果。