一个物体实现抛物线运动，物理上是将物体分为水平运动（匀速）和竖直运动（加速）；用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);}

 

　　}

 

　　里面主要用的的就是贝塞尔曲线斜率就是物体的运动速度可以根据不同斜率绘制各样的曲线运动


本文转载自中文网