為了更好地學習和理解CSS，我們可以結合實際案例進行學習。今天，我們將學習如何使用CSS來制作小船的動畫視頻。

.boat{
position: relative;
}
.boat::before{
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 15px 0 15px;
border-color: transparent transparent transparent #8b0000;
}
.boat::after{
content: "";
position: absolute;
width: 30px;
height: 50px;
background-color: #333333;
border-radius: 0 0 20px 20px;
margin: 0 auto;
top: -20px;
left: -7.5px;
}
@keyframes boat-move{
0%{
transform: translateX(-50%);
}
100%{
transform: translateX(50%);
}
}
.boat{
animation-name: boat-move;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

以上代碼演示了如何使用CSS中的偽元素before和after來組合成小船的圖形，并使用關鍵幀動畫來使其移動。

你也可以根據自己的需要來進行修改和調整，比如改變小船的顏色或者增加一些其他的動畫效果。

總的來說，通過實際案例的演示，我們可以更加深入地理解CSS的使用，同時也可以提高我們的CSS技能水平。