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怎么實現貝塞爾曲線”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！