在網(wǎng)頁設(shè)計(jì)中，CSS是一個(gè)不可或缺的技術(shù)，它可以讓我們的網(wǎng)頁更加美觀和生動(dòng)。那么我們可以用CSS來創(chuàng)建一個(gè)可愛的小鳥在海邊飛翔的動(dòng)畫效果。

.bird {
position: absolute;
width: 40px;
height: 30px;
background: url(bird.png) no-repeat;
animation: fly 4s infinite linear;
}
@keyframes fly {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(50px) translateY(-150px);
}
50% {
transform: translateX(100px) translateY(-50px);
}
75% {
transform: translateX(150px) translateY(-150px);
}
100% {
transform: translateX(200px) translateY(0);
}
}

在這段代碼中，我們首先創(chuàng)建了一個(gè)class為"bird"的元素，然后定義了它的位置、大小、背景圖以及動(dòng)畫效果。在動(dòng)畫中，我們使用了@keyframes來定義小鳥的飛行軌跡，采用了平移（translate）的方式讓小鳥左右移動(dòng)同時(shí)上下飛行。

當(dāng)然，這還不夠，我們還需要為小鳥添加一個(gè)陰影效果，讓它看起來更加真實(shí)。

.bird:before {
content: "";
position: absolute;
width: 40px;
height: 30px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
top: -5px;
left: 5px;
z-index: -1;
transform: rotate(15deg);
filter: blur(5px);
}

在這段代碼中，我們使用了:before偽元素來創(chuàng)建小鳥的陰影，同時(shí)為它添加了一些樣式屬性，如大小、背景色、邊框半徑、位置、z-index以及旋轉(zhuǎn)角度等。

最后，我們只需要將小鳥元素添加到我們的網(wǎng)頁中，就能看到它在海邊飛翔的動(dòng)態(tài)效果了。