今天我們來學習如何使用CSS創建一個簡單的線條小船動畫。這個動畫由一條水線和一個小船組成。我們將使用CSS屬性和屬性值來定義它們的動畫效果，讓小船在水面上漂浮。

// HTML結構
// CSS樣式
.boat {
position: relative;
width: 200px;
height: 150px;
}
.water {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(180deg, #0d47a1, #1976d2, #0d47a1);
animation: water 2s infinite linear;
}
.boat-body {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 30px;
background: #ffffff;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.boat-sail {
position: absolute;
bottom: 40px;
left: 60px;
width: 60px;
height: 75px;
background: #ffffff;
transform-origin: top;
animation: sail 2s infinite ease-in-out;
}
// CSS動畫
@keyframes water {
to {
background-position-x: 100%;
}
}
@keyframes sail {
0% {
transform: rotate(0);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(0);
}
}

現在讓我們來解釋一下上面的代碼，讓你更理解這個動畫是如何創作的。

首先，我們創建了一個div元素作為大的容器，并為其設置了相對定位。然后在該容器內創建三個div元素，表示水面，船身和帆。這三個元素都被絕對定位，并通過top和left屬性進行位置調整。

水面使用了一個漸變背景，由深到淺呈現出水的質感。它還設置了一個無限循環的動畫，使其水平移動，給人一種水在流動的感覺。

船身是一個白色的長方形，并使用border-radius屬性使其底部邊緣變得更加圓潤。還設置了陰影屬性，給船身一個浮動在水面上的感覺。

最后是帆，它也是一個白色元素，被旋轉以給出一個兩步一回頭的旋轉效果，并使用transform-origin旋轉點屬性，使旋轉更平穩自然。

通過使用CSS屬性和屬性值的組合，我們能夠輕松地創建出一個小巧的、漸變色的水面，和一個可愛、漂浮的小船和帆。是不是很簡單呢？