css3怎么实现贝塞尔曲线

本篇内容主要讲解“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怎么实现贝塞尔曲线”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！