css3一些屬性

2021-10-13 21:04:24 字數 3097 閱讀 5404

1.第乙個引數預設朝外,可設定朝內inset或者不寫

2.第二個引數必須寫,左右水平偏移量;

3.第三個引數必須寫,上下垂直偏移量;

4.第四個引數可選,擴散blur寬度

5.第五個引數可選,顏色

box-shadow裡面引數可以疊加,eg:

box-shadow:inset 1px 1px 1px pink,

-1px -1px 2px blue;

//內**影都可以疊加寫

@font-face

div

transtion-property:all; //過渡屬性

transtion-duration:1s; //過渡花的時間

transtion-timing-funtion:linear; //過渡型別,先快後慢還是先慢後快還是線性;可以設定貝塞爾曲線cubic-bezier(0.075, 0.82, 0.165, 1)裡面寫四個引數,前兩個為乙個點,後兩個為乙個點,看物體速率主要看斜率,可以自己調節

transtion-delay:1s; //過渡延遲時間

@keyframes name 

25%:

50%:

75%:

100%:

}div

steps屬性,(num,start/end)設定過後沒有過渡效果,到時間跳轉;一般下面這麼用;當前面的引數為1時可以簡寫為steps-start或者steps-end

num時乙個動畫多少步完成動畫

steps(1,end) 會忽略動畫的最後一幀

steps(1,start)會忽略動畫的開始一幀

@keyframes name 

25%:

50%:

75%:

100%:

}animation:name 4s steps(1,end) forwards;

.father

.son

1.transform-origin

(中心點,旋轉中心,平移中心設定),值預設center center;可以寫數字 0 0;是左上角,前面是x值,後面是y座標值,越大越往下和右,相對於本身

2.transform:rotate();

括號引數一般寫角度deg;其中有rotatex;rotatey;rotatez,rotate相當於繞中心點圍著z軸轉

繞x,y軸轉看的不是很真切,可以給父盒子設定

perspective:800px; /* 3d 元素距檢視的距離(個人理解為設定深度) */

transform-style:preserve-3d;/* 使被轉換的子元素保留其 3d 轉換: *

perspective-origin:center center;/* 設定旋轉中心點 */

transform:rotate3d(x,y,z,angle); 向量x,y,z以及最後的角度旋轉

3.transform:scale(.5,.5);大於1擴張,小於1收縮,scalex,scaley,scalez,scale3d

1,伸縮的是座標軸刻度transform:scale(.5,.5) translatex(100px);視覺只平移了50px

2,可以疊加操作transform:scale(.5,.5) scale(2,2);不變

4.transform:skew(x,y);引數角度

skewx;skewy

5.transform:translate();相當於自身平移百分比的話

translatex;translatey;translatez

想居中可以:left:50%;transform:translatex(-50%);

6.transform:perspective();給本身設定進深;缺點不能設定perspective-origin

7.transform:matrix();transfrom的本質是矩陣的相乘;二維的是三階矩陣,三維四階矩陣

比如想要x軸2倍;|x,y,1 |為原始的座標;想要裡面的|x,y,1|都變成兩倍;求前乙個矩陣;得出前乙個矩陣為| 2 , 0 , 0 | ,| 0 , 2 , 0 | , | 0 , 0 , 1 | 所以matrix的引數為(2,0,0,2,0,0)即只看第一行和第二行(2,0),(0,2),(0,0)相當於x軸拉伸兩倍;scale原理(a,0,0,b,0,0)

| 2 , 0 , 0 |           | x |     | 2x |

| 0 , 2 , 0 | * | y | = | 2y |

| 0 , 0 , 1 | | 1 | | 1 |

比如想要平移(5,5);|x,y,1 |為原始的座標;想要裡面的|x,y,1|都變|x+5,y+5|;求前乙個矩陣;得出前乙個矩陣為| 1 , 0 , 5 | ,| 0 , 1 , 5 | , | 0 , 0 , 1 | 所以matrix的引數為(1,0,0,1,5,5)相當於整個位移了(5,5);translate原理(1,0,0,1,x,y)

| 1 , 0 , 5 |           | x |     | x+5 |

| 0 , 1 , 5 | * | y | = | y+5 |

| 0 , 0 , 1 | | 1 | | 1 |

rotate原理;matrix(cos(θ),sin(θ),-sin(θ),cos(θ),x,x)

| cos(θ) , -sin(θ) , e |   | x |     | cos(θ)x+ -sin(θ)y+e|

| sin(θ) , cos(θ) , f | * | y | = |sin(θ)x +cos(θ)y+ f |

| 0 , 0 , 1 | | 1 | | 1 |

3d

縮放 : matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

平移 : matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

CSS3 一些屬性

1.flex direction 調整主軸方向 預設為水平方向 包括row column row reverse column reverse 2.justify content 主軸方向對齊,可以調整元素在主軸方向上的對齊方式,包括flex start flex end center space ...

css3的一些屬性

以前還沒有注意過css的一些屬性,近期發現有一些樣式很好用,現在整理一遍。keyframes 規定動畫 可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的 keyframes mymove mymove必須定義動畫的名稱在 100 moz keyframes m...

css3 的一些新屬性

1.邊框新屬性 border radius border shadow border image 2.背景新屬性 background size background origin 規定背景的定位區域 3.文字效果 text shadow 文字陰影 word warp 強制換行 4.字型 font ...