CSS如何实现小球抛物线运动的动画效果

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