css3一些屬性

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 |

縮放 : 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一些屬性

CSS3 一些屬性

css3的一些屬性

css3 的一些新屬性

css3一些屬性

CSS3 一些屬性

css3的一些屬性

css3 的一些新屬性

相關推薦