本篇内容主要讲解“css3怎么实现贝塞尔曲线”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3怎么实现贝塞尔曲线”吧!
贝塞尔曲线在线取值，打开网站就看到如下的界面;你可以自己调解运动曲线;我自己选了个向上做加速的曲线;然后复制cubic-bezier()值就是可以了。
贝塞尔曲线所有的代码;
html代码
css代码
html{
background:#ad4e24;
}
//定义球的初始值，位置是绝对定位;
.ball{
height:100px;
width:100px;
border-radius:50%;
position:absolute;
bottom:40px;
z-index:10;
left:40px;
background:greenyellow;
}
//定义动画的流程
.run_top_right{
display:block;
animation:run-right-right3s0.4s1linear,run-right-top3s0.4s1cubic-bezier(.66,.1,1,.41);
//animation:run-right-right3s0.4s1linear,run-right-top3s0.4s1ease-out;
animation-fill-mode:forwards;
}
//向上走的动画初始及结尾值
@keyframesrun-right-top{
0%{
bottom:40px;
}
100%{
bottom:800px;
}
}
//向上右的动画初始及结尾值
@keyframesrun-right-right{
0%{
left:40px;
transform:scale(0.7);
}
100%{
left:600px;
transform:scale(0.45);
}
}
贝塞尔曲线简单解释
第一、分解运动
上图的曲线运动进行分解
向右：匀速运动;
向上：加速运动;(因为向上的线越来越陡，意味着速度越来越快，所以在做加速运动)
第二、实现代码解释
有了对该运动的本质认识，那么实现起来就很易如反掌了。
总之，想要深入了解CSS3动画,实现随心所欲的动画效果,还是有必要理解下其中的原理。
到此，相信大家对“css3怎么实现贝塞尔曲线”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！