CSS動畫是網頁設計中不可或缺的一部分，可以增加頁面的視覺效果和用戶體驗。以下是一些充滿CSS動畫的網頁，讓我們一起來欣賞：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS動畫網頁示例</title>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>這是一個簡單的CSS動畫示例，它將一個方塊旋轉了360度。這個動畫是由一個名為example的關鍵幀定義的，其中at 0%的時間點 transforms: rotate(0deg) ， at 100%的時間點 transform: rotate(360deg)。動畫的作用時間為3秒，重復次數為無限，方向為交替往返。
除了旋轉效果，CSS動畫還可以創建其他類型的動畫。例如，以下CSS可以創建一個變形的球：
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: relative;
animation-name: animate-ball;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes animate-ball {
from {
transform: scale(1);
}
to {
transform: scale(2);
background-color: blue;
}
}除了動畫的效果外，還可以使用CSS動畫來為元素添加交互性和響應性。以下是一個例子，當用戶將鼠標懸停在元素上時，元素會以動畫的方式擴大：
.box {
width: 50px;
height: 50px;
background-color: #333;
transition: all 0.2s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}這些示例只是CSS動畫的冰山一角。使用CSS動畫，您可以創建各種各樣的效果和交互。只需發揮創意，您就能讓您的網頁與眾不同！