CCS3的過渡、變換、動畫以及響應式布局、彈性布局

CSS3 過渡 、變換、動畫

 

 

在沒有CSS3之前，如果頁面上需要一些動畫效果，要么你自己編寫 JavaScript，要么使用 JavaScript 框架(如 jQuery)來提高效率。

但是CSS3出來之后，有能力做一些如平滑過渡(比如在鼠標懸停時)和在屏幕上移動元素之類的事情。例如動畫，過渡和變換效果。

1、過渡屬性  ---- transition：
transition可以接收四個屬性值：

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

  2、定義過渡效果花費的時間。默認是 0。一般是.3s或者.5s。

  3、規定過渡效果的時間曲線。默認是 "ease"。

  4、規定過渡效果何時開始。默認是 0。（一般不用）

[注意]：transition可以同時接收多個過渡效果，中間用逗號分割。

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

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

常用的變換函數

　　　translate(xPX,yPX) ，平移：Y軸不寫默認為0。

　　　rotate(Xdeg) ，  旋轉：旋轉7度。只寫一個值表示繞Z軸旋轉。

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

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

3、動畫屬性  ---- animation：

　　1、聲明一個動畫（關鍵幀）
            　　@keyframes name{
             　　   from{}
              　　  to{}
           　　　 }
　　2、階段寫法
　　　　　a.直接使用from-to的寫法。
　　　　    b.可以使用百分比（0%~100%），開頭必須是0%，結尾必須是100%。
　　3、在CSS選擇器中使用animation屬性調用動畫。

 

            #div1{
                width: 150px;
                height: 150px;
                background-color: yellow;
                animation: myFrame 5s infinite alternate ;
            }
            
            @keyframes myFrame{
                0%{
                    background-color: yellow;
                }
                20%{
                    background-color: red;
                }
                60%{
                    background-color: green;
                }
                100%{
                    background-color: blue;
                }
            }

 

紅色必填，其他選填。

animation-name	@keyframes 動畫的名稱。
animation-duration	動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function	動畫的速度曲線。默認是 "ease"。
animation-delay	動畫何時開始。默認是 0。
animation-iteration-count	動畫被播放的次數。默認是 1。無限次是infinite。
animation-direction	動畫是否在下一次是否逆向地播放。默認是 normal。alternate為逆向播放。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-file-mode	規定對象動畫結束話停留的狀態。要使用必須是有限次。backwards-默認，回到最初狀態；forwards停留在最后狀 態。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

4、響應式布局：

　　隨着CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、ipad的Web瀏覽器等等）都能顯示一樣的效果。通常是結合流式布局+彈性布局，再搭配媒體查詢技術使用。

響應式幾乎已經成為優秀頁面布局的標准。

1、布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。

2、布局規則：

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

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

　　　　2、使用媒體查詢。即 @media （媒體查詢）。

 

1、直接在CSS中使用：
                           @media  媒體類型（長選all或screen） and (條件1  and (條件2){
 3                                CSS選擇器{
 4                                    CSS屬性：屬性值;
 5                                }
 6                            }
2.使用link標簽連接CSS，使用media屬性進行媒體查詢。
        <link rel="stylesheet" type="text/css" href="CSS/01-pc.css" media="all and (max-width:400px ) "/>

3.使用import導入CSS，可以直接用空格分割，進行媒體查詢：
            @import url("CSS/01-pc.css") all and (max-width:800px);

 

效果：

---

 

 5、彈性布局--flex：

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

flex（ flexible box：彈性布局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。

參考：flex  彈性布局詳解

1. 彈性布局的使用
   1. 給父容器添加，display:flex/inline-flex屬性，可以設置在當前容器使用彈性布局。
   2. flex表示塊級元素，inline-flex表示行級。
   3. 一旦使用彈性布局，浮動float，清除浮動clear都不能使用，但是定位position可以使用。
2. 作用於容器的屬性
   1. flex-direction：設置主軸方向。
      
      1. row（默認值）：主軸為水平方向，起點在左端。
      2. row-reverse：主軸為水平方向，起點在右端。
      3. column：主軸為垂直方向，起點在上沿。
      4. column-reverse：主軸為垂直方向，起點在下沿
   2. flex-rap ： 當主軸空間不足時，是否斷行顯示。
      
      1. nowrap（默認）：不換行。
      2. wrap：換行，第一行在上方。
      3. wrap-reverse：換行，第一行在下方。
   3. flex-flow  ：  是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row /nowrap。
   4. justify-content  ：  定義了項目在主軸上的對齊方式。
      1. flex-start（默認值）：左對齊
      2. flex-end：右對齊
      3. center： 居中
      4. space-between：兩端對齊，項目之間的間隔都相等。
      5. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
   5. align-items： 定義項目在交叉軸上如何對齊。（只適用於單獨一行的容器）
      
      1. flex-start：交叉軸的起點對齊。（上）
      2. flex-end：交叉軸的終點對齊。（下）
      3. center：交叉軸的中點對齊。
      4. baseline: 項目的第一行文字的基線對齊。（文字底端對齊）
      5. stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
   6. align-content ： 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。（適用於多行）
      
      1. flex-start：與交叉軸的起點對齊。（上）
      2. flex-end：與交叉軸的終點對齊。（下）
      3. center：與交叉軸的中點對齊。
      4. space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
      5. space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
      6. stretch（默認值）：軸線占滿整個交叉軸。
3. 作用於項目的屬
   1. order：定義項目的排列順序。數值越小，排列越靠前，默認為0。
   2. flex-grow：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
   3. flex-shrink：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
   4. align-self：允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，繼承父容器的屬性。