CSS實例之八仙過海

在這個例子中，我們將展示如何使用CSS創建一個八仙過海的動畫效果。

首先，我們需要創建一個容器，在這個容器中放置8個div元素，每個div元素分別代表八仙中的一個人物。

接下來，我們需要使用CSS中的動畫屬性來控制每個人物的運動軌跡和動畫效果。在這個例子中，我們使用了@keyframes來定義動畫，并在每個div元素上應用動畫屬性。

.container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
}
.person {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f44336;
animation: move 5s linear infinite;
}
@keyframes move {
0% {
left: 0px;
top: 200px;
}
25% {
left: 200px;
top: 0px;
}
50% {
left: 400px;
top: 200px;
}
75% {
left: 200px;
top: 400px;
}
100% {
left: 0;
top: 200px;
}
}

最后，我們將結果放在一個HTML頁面中，并運行它。你會看到八仙在頁面上不停地繞圈運動，形成一種有趣的視覺效果。

這個例子展示了如何使用CSS來創建動畫效果，這些效果可以用于增強網頁的交互性和視覺吸引力。