想要用 CSS 來實現一個泳道效果嗎？下面就讓我帶你一起來嘗試吧！

.swimming-pool {
background-color: #1792ff;
height: 500px;
position: relative;
overflow: hidden;
}
.swimmer {
width: 50px;
height: 100px;
background-color: #fff;
position: absolute;
bottom: -100px;
animation: swim linear 10s infinite;
}
@keyframes swim {
0% { left: -50px; transform: rotate(-30deg); }
50% { left: calc(50% - 25px); transform: rotate(30deg); }
100% { left: calc(100% + 50px); transform: rotate(-30deg); }
}

首先我們要創建一個泳池的容器，即 .swimming-pool 類。設置該容器的高度為 500px，并設置 overflow:hidden 隱藏掉超出容器范圍的內容。

接著我們需要創建一個游泳者的容器，即 .swimmer 類。將其寬度設置為 50px，高度設置為 100px，背景顏色為白色。并將其絕對定位到泳池容器底部。

接下來，我們需要使用 CSS 動畫，使游泳者在泳池容器內不斷地游動。這里我們使用 @keyframes 來定義游泳者的動作，即從出發點到第一個拐點的移動、從第一個拐點到第二個拐點的移動、從第二個拐點到結束點的移動。將該動畫應用到 .swimmer 類上，并設置其持續時間為 10s，循環運行無限次。

好了，現在你可以打開瀏覽器看看你實現的泳道效果了！是不是很有趣呢？