精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
CSS如何实现小球抛物线运动的动画效果
这篇文章将为大家详细讲解有关CSS如何实现小球抛物线运动的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、成都全网营销、网站程序开发、HTML5响应式重庆网站建设公司、手机网站制作设计、微商城、网站托管及网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都VR全景行业客户提供了网站维护服务。
一个物体实现抛物线运动，物理上是将物体分为水平运动（匀速）和竖直运动（加速）；用css3实现原理也如此，用该元素需要两层，一层控制水平，一层控制竖直；在css3中可以通过过渡或者动画-timing-function的贝塞尔曲线设置速度，贝塞尔曲线的斜率就是物体运动的速度因此对竖直方向运动设置不同的贝塞尔公式便可以得到上抛、平抛、扭曲等各样曲线运动。
主要实现如下html部分主要两层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如何实现小球抛物线运动的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
文章题目：CSS如何实现小球抛物线运动的动画效果
标题URL：http://cdkjz.cn/article/ghpech.html
