在現(xiàn)代的網(wǎng)頁設(shè)計中，動畫效果是非常重要的一部分。CSS3提供了許多強大的工具和功能，可以幫助開發(fā)人員實現(xiàn)有趣和令人印象深刻的動畫效果。其中，基于CSS3的城市動畫是一種非常賞心悅目的效果，可以為網(wǎng)站添加一點活力。

.city {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
perspective: 500px;
}
.building {
width: 80px;
height: 200px;
margin: 0 20px;
position: absolute;
bottom: 0;
transform-origin: bottom;
animation: building 2s infinite ease-in-out alternate;
}
.building-1 {
background: linear-gradient(to bottom, #e74c3c, #c0392b);
left: 0;
}
.building-2 {
background: linear-gradient(to bottom, #f1c40f, #f39c12);
left: 100px;
animation-delay: 0.2s;
}
.building-3 {
background: linear-gradient(to bottom, #3498db, #2980b9);
left: 200px;
animation-delay: 0.4s;
}
.building-4 {
background: linear-gradient(to bottom, #9b59b6, #8e44ad);
right: 100px;
animation-delay: 0.6s;
}
.building-5 {
background: linear-gradient(to bottom, #2ecc71, #27ae60);
right: 0;
animation-delay: 0.8s;
}
@keyframes building {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.7);
}
}

在上面的代碼中，我們定義了一個類名為city的容器元素，它具有透視效果。我們還定義了一個類名為building的元素，表示五個大樓。每個大樓都具有不同的背景顏色，并在動畫中交替變換。建筑物的高度也在動畫中改變，讓它們看起來像是在震動。我們使用CSS3的transform屬性和transform-origin屬性來定義建筑物的變換。

最后，我們使用@keyframes規(guī)則來定義動畫的關(guān)鍵幀。這個動畫讓建筑物在互相震動，給人一種整個城市都在晃動的感覺。我們使用delay屬性來讓動畫相互錯開，以創(chuàng)建出更具吸引力的效果。