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如何实现小球抛物线运动的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。