CSS如何實(shí)現(xiàn)小球拋物線運(yùn)動(dòng)的動(dòng)畫效果

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

　　一個(gè)物體實(shí)現(xiàn)拋物線運(yùn)動(dòng)，物理上是將物體分為水平運(yùn)動(dòng)（勻速）和豎直運(yùn)動(dòng)（加速）；用css3實(shí)現(xiàn)原理也如此，用該元素需要兩層，一層控制水平，一層控制豎直；在css3中可以通過過渡或者動(dòng)畫-timing-function的貝塞爾曲線設(shè)置速度，貝塞爾曲線的斜率就是物體運(yùn)動(dòng)的速度因此對豎直方向運(yùn)動(dòng)設(shè)置不同的貝塞爾公式便可以得到上拋、平拋、扭曲等各樣曲線運(yùn)動(dòng)。

　　主要實(shí)現(xiàn)如下html部分主要兩層div一個(gè)控制水平運(yùn)動(dòng)，一個(gè)控制豎直運(yùn)動(dòng)

　　<divclass="wraper"><!--控制豎直運(yùn)動(dòng)-->

　　<divclass="item"></div><!--控制水平運(yùn)動(dòng)-->

　　</div>

　　<divclass="item2"></div>

　　在css中也是比較簡單直接設(shè)置水平和豎直的運(yùn)動(dòng)動(dòng)畫和進(jìn)行動(dòng)畫的設(shè)置

　　*{margin:0;padding:0}/*簡單的瀏覽器兼容*/

　　/*設(shè)置初始樣式*/

　　.item,.item2{

　　width:20px;

　　height:20px;

　　display:inline-block;

　　position:absolute;

　　top:50px;

　　left:20px;

　　background-color:#00aa00;

　　border-radius:50%;

　　}

　　/*豎直運(yùn)動(dòng)*/

　　.wraper{

　　animation:vertical-animation2s.5s2;

　　animation-timing-function:cubic-bezier(.11,-.33,.55,.11);

　　}

　　/*水平運(yùn)動(dòng)*/

　　.wraper.item{

　　animation:hor-animation2slinear.5s2;

　　}

　　@-moz-keyframeshor-animation{

　　0%{transform:translateX(0px);}

　　100%{transform:translateX(400px);}

　　}

　　@-webkit-keyframeshor-animation{

　　0%{transform:translateX(0px);}

　　100%{transform:translateX(400px);}

　　}

　　@-moz-keyframesvertical-animation{

　　0%{transform:translateY(0px);}

　　100%{transform:translateY(400px);}

　　}

　　@-webkit-keyframesvertical-animation{

　　0%{transform:translateY(0px);}

　　100%{transform:translateY(400px);}

　　}

　　里面主要用的的就是貝塞爾曲線斜率就是物體的運(yùn)動(dòng)速度可以根據(jù)不同斜率繪制各樣的曲線運(yùn)動(dòng)

關(guān)于“CSS如何實(shí)現(xiàn)小球拋物線運(yùn)動(dòng)的動(dòng)畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。