CSS3 過(guò)渡 、變換、動(dòng)畫(huà)

?

?

在沒(méi)有CSS3之前，如果頁(yè)面上需要一些動(dòng)畫(huà)效果，要么你自己編寫(xiě) JavaScript，要么使用 JavaScript 框架(如 jQuery)來(lái)提高效率。

但是CSS3出來(lái)之后，有能力做一些如平滑過(guò)渡(比如在鼠標(biāo)懸停時(shí))和在屏幕上移動(dòng)元素之類(lèi)的事情。例如動(dòng)畫(huà)，過(guò)渡和變換效果。

1、過(guò)渡屬性? ---- transition：
transition可以接收四個(gè)屬性值：

? 1、參與過(guò)渡的CSS樣式屬性，可以指定為all/none。

? 2、定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。一般是.3s或者.5s。

? 3、規(guī)定過(guò)渡效果的時(shí)間曲線(xiàn)。默認(rèn)是 "ease"。

? 4、規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。（一般不用）

[注意]：transition可以同時(shí)接收多個(gè)過(guò)渡效果，中間用逗號(hào)分割。

1 　　　#div1{ 2 width: 100px; 3 height: 100px; 4 background-color: yellow; 5 transition: all 3s ease 2s; 6 }

2、變換屬性? ---- transform：

常用的變換函數(shù)

　　　translate(xPX,yPX) ，平移：Y軸不寫(xiě)默認(rèn)為0。

　　　rotate(Xdeg) ，? 旋轉(zhuǎn)：旋轉(zhuǎn)7度。只寫(xiě)一個(gè)值表示繞Z軸旋轉(zhuǎn)。

　　　scale(x)?? ??? ， 縮放：只寫(xiě)一個(gè)值表示XY都縮放。0消失，1正常，2放大。

　　　skew(Xdeg)? ，傾斜：只寫(xiě)一個(gè)值表示沿X軸傾斜。
　　　　[注意]：transform可以同時(shí)接收多個(gè)變換函數(shù)，中間用空格分割。
transform-origin? :? 定義變換起點(diǎn)，常配合旋轉(zhuǎn)使用。（left/center/top/right/bottom或者制定X點(diǎn)與Y點(diǎn)坐標(biāo)位置。）

3、動(dòng)畫(huà)屬性? ---- animation：

　　1、聲明一個(gè)動(dòng)畫(huà)（關(guān)鍵幀）
?? ??? ??? ?　　@keyframes name{
?? ??? ??? ??　　? ?from{}
?? ??? ??? ???　　 ?to{}
?? ??? ??? 　　　 }
　　2、階段寫(xiě)法
　　　　　a.直接使用from-to的寫(xiě)法。
　　　　??? b.可以使用百分比（0%~100%），開(kāi)頭必須是0%，結(jié)尾必須是100%。
　　3、在CSS選擇器中使用animation屬性調(diào)用動(dòng)畫(huà)。

?

1 #div1{ 2 width: 150px; 3 height: 150px; 4 background-color: yellow; 5 animation: myFrame 5s infinite alternate ; 6 } 7 8 @keyframes myFrame{ 9 0%{ 10 background-color: yellow; 11 } 12 20%{ 13 background-color: red; 14 } 15 60%{ 16 background-color: green; 17 } 18 100%{ 19 background-color: blue; 20 } 21 } 紅色必填，其他選填。

animation-name	@keyframes 動(dòng)畫(huà)的名稱(chēng)。
animation-duration	動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
animation-timing-function	動(dòng)畫(huà)的速度曲線(xiàn)。默認(rèn)是 "ease"。
animation-delay	動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。
animation-iteration-count	動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。無(wú)限次是infinite。
animation-direction	動(dòng)畫(huà)是否在下一次是否逆向地播放。默認(rèn)是 normal。alternate為逆向播放。
animation-play-state	規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。
animation-file-mode	規(guī)定對(duì)象動(dòng)畫(huà)結(jié)束話(huà)停留的狀態(tài)。要使用必須是有限次。backwards-默認(rèn)，回到最初狀態(tài)；forwards停留在最后狀 態(tài)。

---

4、響應(yīng)式布局： 　　隨著CSS3出現(xiàn)了媒體查詢(xún)技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計(jì)的概念。響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁(yè)面在所有終端上（各種尺寸的PC、手機(jī)、手表、ipad的Web瀏覽器等等）都能顯示一樣的效果。通常是結(jié)合流式布局 彈性布局，再搭配媒體查詢(xún)技術(shù)使用。

響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁(yè)面布局的標(biāo)準(zhǔn)。

1、布局特點(diǎn)：每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

2、布局規(guī)則：

　　　　1、必須在頭部添加viewport屬性。

　　　　<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

　　　　2、使用媒體查詢(xún)。即?@media （媒體查詢(xún)）。

?

1 1、直接在CSS中使用： 2 @media 媒體類(lèi)型（長(zhǎng)選all或screen） and (條件1 and (條件2){3 CSS選擇器{4 CSS屬性：屬性值;5 }6 } 7 2.使用link標(biāo)簽連接CSS，使用media屬性進(jìn)行媒體查詢(xún)。 8 <link rel="stylesheet" type="text/css" href="CSS/01-pc.css" media="all and (max-width:400px ) "/> 9 10 3.使用import導(dǎo)入CSS，可以直接用空格分割，進(jìn)行媒體查詢(xún)： 11 @import url("CSS/01-pc.css") all and (max-width:800px);

?

效果：

---

?

?5、彈性布局--flex：

css3最突出的新屬性之一便是flex布局，彈性布局簡(jiǎn)單、方便、快速。

flex（ flexible box：彈性布局盒模型）,是2009年w3c提出的一種可以簡(jiǎn)潔、快速?gòu)椥圆季值膶傩浴Ｖ饕枷胧墙o予容器控制內(nèi)部元素高度和寬度的能力。

參考：flex? 彈性布局詳解

彈性布局的使用

給父容器添加，display:flex/inline-flex屬性，可以設(shè)置在當(dāng)前容器使用彈性布局。

flex表示塊級(jí)元素，inline-flex表示行級(jí)。

一旦使用彈性布局，浮動(dòng)float，清除浮動(dòng)clear都不能使用，但是定位position可以使用。

作用于容器的屬性

flex-direction：設(shè)置主軸方向。

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。

row-reverse：主軸為水平方向，起點(diǎn)在右端。

column：主軸為垂直方向，起點(diǎn)在上沿。

column-reverse：主軸為垂直方向，起點(diǎn)在下沿

flex-rap ： 當(dāng)主軸空間不足時(shí)，是否斷行顯示。

nowrap（默認(rèn)）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

flex-flow? ：? 是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row /nowrap。

justify-content? ：? 定義了項(xiàng)目在主軸上的對(duì)齊方式。

flex-start（默認(rèn)值）：左對(duì)齊

flex-end：右對(duì)齊

center： 居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

align-items： 定義項(xiàng)目在交叉軸上如何對(duì)齊。（只適用于單獨(dú)一行的容器）

flex-start：交叉軸的起點(diǎn)對(duì)齊。（上）

flex-end：交叉軸的終點(diǎn)對(duì)齊。（下）

center：交叉軸的中點(diǎn)對(duì)齊。

baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。（文字底端對(duì)齊）

stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

align-content ： 定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用。（適用于多行）

flex-start：與交叉軸的起點(diǎn)對(duì)齊。（上）

flex-end：與交叉軸的終點(diǎn)對(duì)齊。（下）

center：與交叉軸的中點(diǎn)對(duì)齊。

space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布。

space-around：每根軸線(xiàn)兩側(cè)的間隔都相等。所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍。

stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。

作用于項(xiàng)目的屬

order：定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

flex-shrink：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

align-self：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，繼承父容器的屬性。

　　　　

?

?

?

總結(jié)

以上是生活随笔為你收集整理的CCS3的过渡、变换、动画以及响应式布局、弹性布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。