js和css分別實現元素曲線運動

2022-06-23 09:33:21 字數 842 閱讀 7345

純js實現原理:

通過函式表示式來完成對應的移動,函式表示式能夠得到曲線圖都能完成。

比如 y=sin(x)就是典型的曲線函式。

轉換關係y:函式y軸對應的就是我們的top      y==top

轉換關係x:函式x軸對應的就是我們的left      x==left

示例:(由於是js,順帶畫了運動軌跡)

結果圖:

純css實現原理:

通過animation動畫屬性加上貝塞爾曲線來控制元素xy運動軌跡即可完成,具體運動軌跡通過貝塞爾曲線函式控制。

animation應該都用過,這裡主要說一下貝塞爾曲線。

cubic-bezier稱為三次貝塞爾曲線,主要是生成速度曲線的

函式。其實大家也用過,平時的ease-in,ease-out,linear等都是通過貝塞爾曲線分裝好的函式。

示例:(示例通過控制父容器和子元素,賦予了子元素x和y的運動速度,達到曲線移動效果)

效果圖:圖示藍色塊為父容器,只有乙個運動狀態,棕色塊有兩個方向運動狀態。

js+css混合實現方法就多種多樣了,暫不討論了。

分別用Js和vue實現跑馬燈效果

跑馬燈就是這條資訊串首尾相連,向乙個方向迴圈滾動。實現邏輯 根據id值獲取標籤 獲取標籤的文字內容 擷取文字內容的第乙個字 擷取文字內容第乙個字後面的所有內容 把第 步擷取的第乙個字拼接到第 步擷取的文字內容後面 將第 步拼接後的字串寫入到第 步的標籤中 實現 btn wrap btn start ...

Vue 分別原生JS和Vue實現計數器功能

用vue實現計數器功能,其中vue實現的 黑馬程式設計師vue教程給出,這裡對其css 進行了注釋,並且用原生js重新實現了一次。不能大於10 不能小於0 實現步驟 data中定義資料 num,min,max methods新增兩個方法sub 和add 使用v text將num設定給span標籤 使...

CSS實現控制元素的顯示和隱藏

1 使用label input實現元素的隱藏和顯示 以下 點選 選單 可以實現li列表的顯示和隱藏 style type text css input,ul input checked ul style body label for menu 選單 label div input id menu t...