css css3 中的新特性加強記憶

2021-09-27 09:03:50 字數 1107 閱讀 5517

css3被拆分成如下的小模組,選擇器,盒模型,背景和邊框,文字特效,2d/3d轉換,動畫,多列布局和使用者介面

2d轉換

使用transform:屬性來為元素設定2d轉換,相容瀏覽器加字首 –webkit-  -moz-

使用rotate()方法,讓元素旋轉一定的角度,引數:角度

例如:transform:rotate(30deg); deg是角度的單位

使用translate()方法,讓元素位移,引數:x軸 ,y軸

例如:transform:translate(10px,10px);

使用scale()方法,改變元素的比例大小,引數:x軸比例,y軸比例

例如:transform:scale(2,2);

使用skew()方法,拉伸元素,引數:x軸角度,y軸角度

例如:transform:skew(20deg,20deg);

使用matrix()方法,多變換結合,引數:矩陣,我看不懂

3d轉換

使用rotatex()和rotatey()方法,對元素進行旋轉,瀏覽器很多都不支援,引數:角度

過渡效果

使用transition:屬性為元素設定過渡動畫效果,相容瀏覽器加字首 –webkit-  -moz-,必須是樣式在被修改的時候才會生效,因此在:hover的時候修改元素的樣式,可以看到效果

使用transition:屬性,引數:css樣式 持續時間

例如:transition:width 2s;

引數中使用逗號分隔多項改變,transition:樣式 時間,樣式2 時間2,。。。

動畫

建立動畫@keyframes規則,@keyframes 規則名稱{}

內容裡面,使用百分比來劃分動畫的進度,變化樣式

0%25%

50%75%

100%

例如: animation:***** 2s ease 0s infinite;

@keyframes *****50%100%}

#test

css3 中的新特性加強記憶詳解

css3被拆分成如下的小模組,選擇器,盒模型,背景和邊框,文字特效,2d 3d轉換,動畫,多列布局和使用者介面 2d轉換 使用transform 屬性來為元素設定2d轉換,相容瀏覽器加字首 webkit moz 使用rotate 方法,讓元素旋轉一定的角度,引數 角度 例如 transform ro...

css CSS3中的單位

from css3中的單位 css3中引入了一些新的單位 ch 字元0 零 的寬度 rem 根元素 html元素 的font size vw viewpoint width,視窗寬度,1vw等於視窗寬度的1 vh viewpoint height,視窗高度,1vh等於視窗高度的1 vmin vw和v...

CSS CSS3常用的樣式

強制文字顯示 讓一段文字在固定寬度在一行顯示,最後乙個字元為省略標記 css樣式如下 單行顯示語法 white space nowrap div效果 多行文字最後省略號 div效果 位置,置左 位置,置中 設定 邊框大小 使用數字 設定 的背景顏色 設定 邊框的顏色 設定 暗邊框的顏色 設定 亮邊框...