CSS3給網(wǎng)頁設(shè)計(jì)帶來了許多新的動(dòng)畫效果，其中最常見的就是船只運(yùn)動(dòng)效果了。這種效果常常在海洋、湖泊等場景中見到，讓人感到神秘、浪漫、溫馨。

/* css代碼 */
.ship {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 150px;
height: 100px;
background-color: #fff;
border-radius: 10px;
box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.3);
animation: shipMove 5s forwards infinite;
}
.ship .flag {
position: absolute;
top: -20px;
left: 10px;
width: 30px;
height: 20px;
background-color: #f00;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@keyframes shipMove {
0% {
right: -150px;
transform: translateY(-50%) rotate(30deg);
}
50% {
transform: translateY(-50%) rotate(-30deg);
}
100% {
right: 100%;
transform: translateY(-50%) rotate(30deg);
}
}

上面是一個(gè)簡單的CSS3船只運(yùn)動(dòng)效果的實(shí)現(xiàn)。首先是ship的樣式設(shè)置，它是一個(gè)絕對(duì)定位的元素，位于頁面的右側(cè)中央。然后設(shè)置它的寬度、高度、背景色和邊框等屬性。最后設(shè)置動(dòng)畫效果，使用了@keyframes關(guān)鍵字創(chuàng)建了一組關(guān)鍵幀，定義了船只從右側(cè)進(jìn)入，到中間偏左，再到右側(cè)出去的動(dòng)畫效果。

在船只的.flag類中，設(shè)置船旗的樣式，位于船只的頂部左側(cè)，使用了 clip-path 屬性制作了一個(gè)三角形的形狀，作為船旗的形狀。

通過這種方式，我們可以更加簡單快速地實(shí)現(xiàn)網(wǎng)頁中的船只運(yùn)動(dòng)效果，為頁面增加生動(dòng)、有趣的視覺效果。