CSS3技術(shù)在網(wǎng)頁設(shè)計中扮演著越來越重要的角色。它不僅可以美化頁面，還可以實現(xiàn)很多復(fù)雜的效果，比如讓鳥兒在頁面中飛翔。
首先，在HTML中創(chuàng)建一個div元素，并為該元素設(shè)置id屬性，如下所示：
<div id="bird"> <img src="bird.png"> </div>
接下來，在CSS文件中設(shè)置鳥兒的樣式。通過@keyframes關(guān)鍵字和transform屬性，可以實現(xiàn)鳥兒的飛行動畫，并設(shè)置動畫的持續(xù)時間和重復(fù)次數(shù)：
#bird {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fly 5s linear infinite;
}
@keyframes fly {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}通過設(shè)置position為absolute，并將top和left設(shè)置為50%，可以讓鳥兒在頁面中居中顯示。transform屬性的translate()方法可以將鳥兒的位置移動到頁面中心，而rotate()方法可以控制鳥兒的旋轉(zhuǎn)方向。通過@keyframes關(guān)鍵字設(shè)置鳥兒的飛行路線和角度，從而實現(xiàn)鳥兒的飛行動畫。
最后，在HTML文件中引用CSS文件即可：
<head> <link rel="stylesheet" href="styles.css"> </head>
這樣，一個簡單的鳥兒飛行動畫就完成了。通過CSS3技術(shù)，我們可以實現(xiàn)更多炫酷的效果，讓網(wǎng)頁更加生動有趣。