這篇文章將為大家詳細(xì)講解有關(guān)css3如何實(shí)現(xiàn)元素弧線運(yùn)動(dòng)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、網(wǎng)站設(shè)計(jì)、睢寧縣網(wǎng)絡(luò)推廣、成都微信小程序、睢寧縣網(wǎng)絡(luò)營(yíng)銷、睢寧縣企業(yè)策劃、睢寧縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供睢寧縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

如何使用CSS控制元素弧線運(yùn)動(dòng)

我們都知道，CSS3的新屬性transfrom過渡效果可以實(shí)現(xiàn)元素位移、旋轉(zhuǎn)、縮放。結(jié)合animation屬性，就可以實(shí)現(xiàn)元素的動(dòng)畫效果。但是如何通過css實(shí)現(xiàn)元素實(shí)現(xiàn)弧線運(yùn)動(dòng)呢：

如上圖動(dòng)畫效果所示，圓球弧線運(yùn)動(dòng)，分析運(yùn)動(dòng)：

• 將小球的運(yùn)動(dòng)拆分成X軸和Y軸兩個(gè)運(yùn)動(dòng)來(lái)看，此時(shí)X軸的小球是以 （慢—快） 這樣的速度運(yùn)動(dòng)；

• 而Y軸的方向小球是以（快—慢）這樣的速度運(yùn)動(dòng)；

• 結(jié)合兩個(gè)軸的運(yùn)動(dòng)，實(shí)現(xiàn)弧線效果

三次貝塞爾（Cubic Bezier）函數(shù)

animation屬性中有一個(gè) animation-timing-function 屬性，動(dòng)畫的速度函數(shù)。而這個(gè)屬性 使用名為三次貝塞爾（Cubic Bezier）函數(shù)的數(shù)學(xué)函數(shù)，來(lái)生成速度曲線。

cubic-bezier (x1,y1,x2,y2)：（三次貝塞爾函數(shù)的具體含義請(qǐng)查閱相關(guān)資料）：

可以通過這個(gè)網(wǎng)站 傳送門 去實(shí)時(shí)調(diào)節(jié)曲線的取值。而animation-timing-function屬性中 已經(jīng)提供了幾個(gè) 已經(jīng)封裝好的速度函數(shù)：也就是我們常用的 ease、linear、ease-in、ease-out、ease-in-out。
 

效果實(shí)現(xiàn)

首先我們能想到的就是將X軸Y軸的位移動(dòng)畫拆開。但是一個(gè)元素的動(dòng)畫同一時(shí)間只能執(zhí)行一個(gè)動(dòng)畫（最后申明的）。所以我們可以換位思考，用兩個(gè)父子元素。給父級(jí)元素添加X軸位移動(dòng)畫，給子元素增加Y軸位移動(dòng)畫，具體代碼如下：