CSS曲線運(yùn)動(dòng)是指通過CSS3動(dòng)畫制作元素沿著曲線路徑運(yùn)動(dòng)的效果。該效果可以為網(wǎng)站增加動(dòng)態(tài)效果，提升用戶體驗(yàn)。下面我們來介紹如何制作CSS曲線運(yùn)動(dòng)。

.curve{
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
border-radius: 50%;
-webkit-animation: curveMove 3s cubic-bezier(0.1, 0.5, 0.8, 0.5) infinite;
}
@-webkit-keyframes curveMove{
0%{top: 0; left: 100px;}
50%{top: 200px; left: 0;}
100%{top: 0; left: 100px;}
}

在上面的代碼中，我們定義了一個(gè)class為curve的div元素，并設(shè)置其position為relative，寬高為200px，背景色為紅色，圓角為50%。接著，我們使用各瀏覽器支持的動(dòng)畫屬性-webkit-animation，在3秒內(nèi)通過cubic-bezier函數(shù)設(shè)置曲線運(yùn)動(dòng)，設(shè)置posiiton固定，通過top，left屬性調(diào)整元素的位置。最后，我們定義了一個(gè)curveMove動(dòng)畫，通過50%對元素進(jìn)行處理，使其向下運(yùn)動(dòng)至200px，向左運(yùn)動(dòng)至0px，再通過100%處理使其返回初始位置。這樣我們就制作出了一個(gè)沿著曲線路徑運(yùn)動(dòng)的元素。

此外，我們還可以通過不同的cubic-bezier函數(shù)實(shí)現(xiàn)不同速度的曲線運(yùn)動(dòng)效果，例如ease-in-out函數(shù)實(shí)現(xiàn)緩入緩出效果，linear函數(shù)實(shí)現(xiàn)線性運(yùn)動(dòng)效果等等。通過CSS曲線運(yùn)動(dòng)，可以為網(wǎng)站增加動(dòng)態(tài)效果，讓用戶感受到更加流暢和活潑的頁面效果。