css3屬性小應用

2021-10-08 09:35:37 字數 880 閱讀 9721

向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

rotate(angle),通過指定的角度對元素進行2d旋轉,正值時順時針旋轉,負值時將逆時針旋轉。

transform:rotate(-20deg)

//利用定時器實現圓圈轉動效果

var tmp=0

function circlerun()

settimeout("circlerun()",20)

}circlerun()

縮放scale()具有三種情況:scale(x,y)表示x、y軸同時放縮(如果只給乙個值,x、y軸同時縮放相同倍數,給2個不同得值則根據所給數值進行縮放);scalex(x)僅向水平方向縮放(x軸);scaley(y)僅向垂直方向縮放(y軸);但他們的縮放中心點是一樣的,中心點就是元素中心的位置,縮放倍數小於1表示縮小x唄,大於1表示放大x倍。

transform:scale(0.8) /*縮小0.8倍*/

//實現動畫效果

function heartrun() else

settimeout("heartrun()",200)

// 'scale(0.8,0.8)'

// settimeout("heartrun()",200);

}heartrun()

function stretch()

//alert(line.length);

for(var j =0;j< line.length ;j++));

} settimeout("stretch()",100);

}stretch()

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

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

CSS3新增屬性(3)

1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始,100 是動畫的完成,這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...