CSS如何實現小球拋物線運動的動畫效果

這篇文章將為大家詳細講解有關CSS如何實現小球拋物線運動的動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

　　主要實現如下html部分主要兩層div一個控制水平運動，一個控制豎直運動

　　<divclass="wraper"><!--控制豎直運動-->

　　<divclass="item"></div><!--控制水平運動-->

　　</div>

　　<divclass="item2"></div>

　　在css中也是比較簡單直接設置水平和豎直的運動動畫和進行動畫的設置

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

　　/*設置初始樣式*/

　　.item,.item2{

　　width:20px;

　　height:20px;

　　display:inline-block;

　　position:absolute;

　　top:50px;

　　left:20px;

　　background-color:#00aa00;

　　border-radius:50%;

　　}

　　/*豎直運動*/

　　.wraper{

　　animation:vertical-animation2s.5s2;

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

　　}

　　/*水平運動*/

　　.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);}

　　}

　　里面主要用的的就是貝塞爾曲線斜率就是物體的運動速度可以根據不同斜率繪制各樣的曲線運動

關于“CSS如何實現小球拋物線運動的動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。