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