13518219792
這篇文章將為大家詳細講解有關css3如何實現元素弧線運動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于做網站、網站設計、睢寧縣網絡推廣、成都微信小程序、睢寧縣網絡營銷、睢寧縣企業策劃、睢寧縣品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯公司為所有大學生創業者提供睢寧縣建站搭建服務，24小時服務熱線：13518219792，官方網址：www.cdcxhl.com
如何使用CSS控制元素弧線運動
我們都知道，CSS3的新屬性transfrom過渡效果可以實現元素位移、旋轉、縮放。結合animation屬性，就可以實現元素的動畫效果。但是如何通過css實現元素實現弧線運動呢：
如上圖動畫效果所示，圓球弧線運動，分析運動：
將小球的運動拆分成X軸和Y軸兩個運動來看，此時X軸的小球是以 （慢—快） 這樣的速度運動；
而Y軸的方向小球是以（快—慢）這樣的速度運動；
結合兩個軸的運動，實現弧線效果
三次貝塞爾（Cubic Bezier）函數
animation屬性中有一個 animation-timing-function 屬性，動畫的速度函數。而這個屬性 使用名為三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。
cubic-bezier (x1,y1,x2,y2)：（三次貝塞爾函數的具體含義請查閱相關資料）：
可以通過這個網站 傳送門 去實時調節曲線的取值。而animation-timing-function屬性中 已經提供了幾個 已經封裝好的速度函數：也就是我們常用的 ease、linear、ease-in、ease-out、ease-in-out。
效果實現
首先我們能想到的就是將X軸Y軸的位移動畫拆開。但是一個元素的動畫同一時間只能執行一個動畫（最后申明的）。所以我們可以換位思考，用兩個父子元素。給父級元素添加X軸位移動畫，給子元素增加Y軸位移動畫，具體代碼如下：