css3怎么實(shí)現(xiàn)貝塞爾曲線

本篇內(nèi)容主要講解“css3怎么實(shí)現(xiàn)貝塞爾曲線”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3怎么實(shí)現(xiàn)貝塞爾曲線”吧!

　　貝塞爾曲線在線取值，打開網(wǎng)站就看到如下的界面;你可以自己調(diào)解運(yùn)動曲線;我自己選了個(gè)向上做加速的曲線;然后復(fù)制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;

　　}

　　//向上走的動畫初始及結(jié)尾值

　　@keyframesrun-right-top{

　　0%{

　　bottom:40px;

　　}

　　100%{

　　bottom:800px;

　　}

　　}

　　//向上右的動畫初始及結(jié)尾值

　　@keyframesrun-right-right{

　　0%{

　　left:40px;

　　transform:scale(0.7);

　　}

　　100%{

　　left:600px;

　　transform:scale(0.45);

　　}

　　}

　　貝塞爾曲線簡單解釋

　　第一、分解運(yùn)動

　　上圖的曲線運(yùn)動進(jìn)行分解

　　向右：勻速運(yùn)動;

　　向上：加速運(yùn)動;(因?yàn)橄蛏系木€越來越陡，意味著速度越來越快，所以在做加速運(yùn)動)

　　第二、實(shí)現(xiàn)代碼解釋

　　有了對該運(yùn)動的本質(zhì)認(rèn)識，那么實(shí)現(xiàn)起來就很易如反掌了。

　　總之，想要深入了解CSS3動畫,實(shí)現(xiàn)隨心所欲的動畫效果,還是有必要理解下其中的原理。

到此，相信大家對“css3怎么實(shí)現(xiàn)貝塞爾曲線”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！