模擬CSS3 多組位移運動屬性的框架封裝

2022-03-04 13:38:05 字數 437 閱讀 8321

obj是將要運動的物件,json是運動完成時的位移結果。

封裝要點:

1.定時器開關flag的定義要放在for in結構的外面,否則,每遍歷一次,都會定義乙個 新的flag

2.if(current != json[attr]) 要放到遍歷的裡面,因為定時器每執行一次,都要判斷一下是否到達終點

3.if(flag == false) 放到遍歷結構的外面,當所有的位移都達到json給的數值的時候,才關閉定時器。否則,只有乙個json[attr]達到位移終點時,定時器就會關閉,此時,可能別的位移還沒有到達json資料給的終點。

function animate(obj,json)

}},30);

if(flag == false)

}

案例

200400

CSS3 變形 位移 translate

變形 位移 translate translate 函式可以將元素向指定的方向移動,類似於position中的relative。或以簡單的理解為,使用translate 函式,可以把元素從原來的位置移動,而不影響在x y軸上的任何web元件。translate我們分為三種情況 1 translate...

css3的3D位移效果講解

lang en charset utf 8 3d位移的demotitle perspective 定義3d元素距離檢視的距離 以畫素為單位 當給乙個元素定義perspective屬性的時候,其 子元素 就獲得了乙個透視效果,元素本身並沒有 設定人眼到螢幕平面的距離,只影響3d元素,不影響2d元素 所...

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...