CSS3

• 一、CSS3新增選擇器
• • 1.屬性選擇器
  • 2.結構僞類選擇器
  • 3.僞元素選擇器
• 二、CSS3盒模型
• 三、css3函數
• • 1.filter 函數
  • 2.calc函數
• 四、CSS3過渡效果
• 五、CSS32D轉換
• • 1.什麼是轉換(transform)
  • 2.移動：translate
  • 3.旋轉：rotate
  • 4.設定中心點
  • 5.縮放:scale
  • 6.2D轉換的綜合寫法
• 六、CSS3動畫
• • 1.動畫步驟
  • 2.動畫的常用屬性
  • 3.動畫速度調節
• 七、CSS33D轉換
• • 1.三維坐标系
  • 2.3D移動
  • 3.透視perpective
  • 4.3D旋轉
  • 5.3d呈現 transfrom-style

一、CSS3新增選擇器

1.屬性選擇器

可以不借助類和id來選擇元素，可以通過标簽的屬性來選擇

input[value]{
}
/*表示選擇必須有value這個屬性的input*/

input[value=22]{
}
/*表示選擇必須有value這個屬性,且value值為2的input，不要加雙引号*/

input[class^=icon]{
}
/*表示選擇必須有class這個屬性,且值為icon開頭的input，不要加雙引号*/

input[class$=icon]{
}
/*表示選擇必須有class這個屬性,且值為icon結尾的input，不要加雙引号*/

input[class*=icon]{
}
/*表示選擇必須有class這個屬性,且值含有icon的input，不要加雙引号*/

           

2.結構僞類選擇器

這個權重是12

是根據文檔結構來選擇的

以一個冒号

ul li:first-child{
}
/*要是不寫li 表示選擇ul裡的第一個元素，最好加上li，表示選擇的是li類型的标簽*/
/*表示比對父元素中第一個子元素li*/
ul li:last-child{
}
/*表示比對父元素中最後一個子元素li*/
ul li:nth-child(n){
}
/*表示比對父元素中第n個子元素li，n可以是even表示是偶數，odd表示是奇數，n也可以是個公式，n是從0開始計算的，
直接寫n表示所有，且隻能寫n這個字母，
2n 是偶數
2n+1 是奇數
5n 是5的倍數
n+5 表示從第5個開始，包含第5個
-n+5 表示前5個，包含第5個
但是要是第一個元素不是li，而是div,就不起作用。因為在解析的時候，會把父元素裡的子盒子都邊上号，一定要标簽和 序号都對上，才能起作用。


*/
ul li:first-of-type{
}
/*表示比對父元素中指定類型li的第一個*/

ul li:last-of-type{
}
/*表示比對父元素中指定類型li的最後一個*/
ul li:nth-of-type(n){
}

/*表示比對父元素中指定類型li的第n個，
nth-of-type是先看前面的标簽，再看後面的n。表示會把父元素中前面的标簽先編上号，再從這裡面找，和nth-child剛好相反。
nth-child是先找孩子，再找标簽，它會把父元素中所有的子标簽都編上号。
*/
           

3.僞元素選擇器

權重為1

利用僞元素來創造标簽。新版是雙冒号，老版本浏覽器是單冒号，盡量使用雙冒号

div::before{
      content:"";
      display:inline-block;
}
/*before是父盒子裡面的前面，*/
div::after{
}
div:hover::before{

}
/*移動顯示僞元素*/
           

僞元素再文檔樹中是找不到的。

一般都是用在字型圖示

僞元素必須有content屬性。

1.清除浮動

額外标簽法

二、CSS3盒模型

固定盒子的大小，使盒子不受邊框和内邊距的影響撐大。

div{
    box-sizing:content-box/borde-box;
}
           

content-box:就是預設值，還是受邊框和padding的大小

border-box: 盒子最終的大小就是width的大小，不會再變化，增加padding和border不會撐大盒子，會自動減小内容的區域，但是padding和border不能超過盒子的寬度。、、

三、css3函數

1.filter 函數

filter 濾鏡屬性，filter是一個函數

模糊和偏移圖檔的顔色

filter:blur(5px)

img{
filter:blur(5px)
}

/*括号裡的值越大，圖檔變模糊。*/

img:hover{
filter:blur(0)
}
/*等于0 就會取消*/
           

2.calc函數

動态計算屬性

div{
  width:calc(100% - 80px)
}
           

裡面的-号左右一定要加空格。

在知道一個子元素的高度後，為了使另外一個子元素随父盒子變化，就可以使用

div>.son{
 witdh:calc(100% - 30px)
}
           

四、CSS3過渡效果

是一個狀态漸漸的過渡到另外一個狀态

div{
 witdh:100px;
 height:100px
 /*transition: 要過度的屬性    時間 運動取消 何時開始；*/
 transition: witdh 0.5s ,height 0.5s
  /*transition: all 0.5s*/
 /*多個變化的屬性逗号隔開或者時間什麼都一樣時，直接寫一個all就行*/
}
div:hover{
    witdh:300px
    height:300px
}
           

過渡屬性:witdh/height/背景顔色/内外邊距都性，想要所有的屬性直接寫all

時間：機關是s.

運動的曲線：ease(預設,速度逐漸慢下來)/linear(勻速)/ease-in(加速)/ease-out(減速)/ease-in-out(先加速後減速)

何時開始：機關是s,可以設定延遲觸發。預設是0s

五、CSS32D轉換

1.什麼是轉換(transform)

可實作元素的位移、旋轉、縮放等效果,在二維平面上改變标簽的位置和形狀的一種技術。transform的變化都不會影響其他的盒子，十分的友善。一般轉換都配合過渡來做。

2.移動：translate

類似于定位，可改變元素在頁面種的位置

寫法

transform:translate(x,y)
transform:translateX(x) //隻移動x軸方向
transform:translateY(y) //隻移動Y軸方向
//x就是x軸的位置，y就是y軸上的位置。網頁種往右是正x,往下是y。原點是左上角
           

移動元素方式基本有：定位，外邊距和2d移動

重點：

1.translate不會影響到其他元素的位置。可以看成移動的盒子變成脫标了，但還占據着那個位置。後面的元素不會頂上來。相當于絕對了。

2.translate中的百分比是相對于自身元素的寬高百分比

3.對行内标簽沒有效果

居中案例：

1.可以和margin-top：父盒子高度的一半/top:50%，來實作垂直居中，這個可以随盒子高度變化而變化,最好使用定位和translate來做，絕對定位。

2.以前是top50%,margin-tio:自己高度的一半，來實作垂直居中，這個是必須得有高度。

3.旋轉：rotate

讓元素在二維平面旋轉。

寫法

1.度數的機關是45deg

2.角度為正時，順時針，負時是逆時針。

3.預設旋轉的中心點是元素的中心的。

4.設定中心點

1.後面的參數x和y是用空格隔開的 。

2.x,y預設轉換的中心點是元素的中心點（50%，50%）

3.還可以給x和y設定像素或者方位名稱（top,bottom,letf,right,center）

4.移動，縮放中心點和旋轉都能修改中心點。

5.縮放:scale

放大和縮小元素

寫法

1.x和y逗号隔開

2.transform:scale(1,1)：寬和高放大一倍，相當于沒有放大

3.transform：scale(2):隻寫一個參數，第二個參數和第一個參數一樣。

4.transform：scale(0.5)縮小

5.scale可以設定轉換中心的縮放，預設以中心點縮放，也可以修改縮放的中心點transform-origin，不會影響其他盒子。

6.以前的重新定義寬高變化是變的下和左右部分，上邊是不動的，不是以中心變大的，而且會影響其他盒子，而scale是中心放大,。

6.2D轉換的綜合寫法

1.順序會影響轉換的效果，先旋轉會改變坐标軸的方法

2.當我們同時有位移和其他屬性的時候，記得要将位移放到最前。

六、CSS3動畫

動畫可以設定多個節點來控制一個或一組動畫，常用來實作複雜的動畫效果。相比較過渡，動畫可以實作更多的變化，更多的控制，連續自動播放等。

1.動畫步驟

１．先定義動畫

@keyframes 動畫名稱  {
  0%{
     width :100px
}
100%{
    widt:200px
}

}
           

０表示動畫的開始，100％表示動畫的完成，這樣的規則叫動畫序列。

＠keyframes 中規定某些ｃｓｓ樣式，就能建立由目前樣式逐漸改變為新樣式的動畫

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，可以任意改變多的樣式或任意多的次數

動畫的節點可以使用百分比來表示或者from和to，等同于0％和100％,百分比就是時間的劃分，百分百*時間，表示多長時間到那個點

百分百需要是整數

2.調用動畫

div{
     width:200px;
     height:200px;
     background-color:red;
     margin:10px;
     animation-name:動畫名稱;
     animation-duration:持續時間,機關是s;
}
           

一個元素可以的定義多個動畫

animation:move 1s,move2 3s
/*用逗号隔開即可*/
           

2.動畫的常用屬性

寫在css裡面

屬性	描述
@keyframes	規定動畫
animation	所有動畫屬性的簡寫屬性，除了animation-plat-state屬性
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’,還有’pause’
animation-fill-mode	規定動畫結束後狀态，保持此位置是forwoards，回到起始位置是backwards

簡寫方式

按順序來寫

animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫結束的狀态
animation： move     5s     linear   2s    infinite alternate  forwards;
           

簡寫的屬性裡面不寫動畫的animation-play-state

animation-play-state動畫的暫停後開始經常和滑鼠經過等方式配合使用

想要動畫走回來，而不是跳回來，使用 animation-direction：alternate

盒子動畫結束後，停在結束位置： animation-fill-mode ：forwoards

3.動畫速度調節

animation-timing-function屬性來控制動畫的速度

值	描述
linear	動畫從頭到尾的速度是相同的，勻速的
ease	預設。動畫以低速開始，然後加快，在結束前變慢
ease-in	動畫以低速開始
ease-out	動畫以低速結束
ease-in-out	動畫以低速開始和結束
steps()	指定了時間函數中的間隔數量（步長）

步長就是動畫分幾步來完成。動畫就不要在寫ease和linear了

white-space

讓文字強制在一行顯示

七、CSS33D轉換

1.三維坐标系

三維坐标系所構成的立體空間，

x軸，往右是正

y軸，往下是正

z軸，往螢幕外朝自己是正。

2.3D移動

transform:translateX(100px):僅是在x軸上移動
transform:translateY(100px):僅是在y軸上移動
transform:translateZ(100px):僅是在z軸上移動,z軸一般是px
transform:translate3d(x,y,z)，其中x,y,z是要移動的距離。
           

3.透視perpective

透視也是視距：就是人的眼睛到螢幕的距離

距離視覺點越近的在電腦平面成像越大，越遠成像越小。

透視的機關是像素。

translateZ要配合透視使用。

透視寫在被觀察元素的父盒子上面。

沒有父級就給body.

視距越小，即眼睛到螢幕越近，物體越大

視距越大，即眼睛到螢幕越遠，物體越小

但是z越大，物體越大

z越小，物體越小

4.3D旋轉

transform:rotateX(45deg):沿着X軸正方向旋轉
transform:rotateY(45deg):沿着Y軸正方向旋轉
transform:rotateZ(45deg):沿着Z軸正方向旋轉
transform:rotate3d(x,y,z,45deg):沿着自定義軸旋轉正旋轉
transform:rotate3d(1,0,0,45deg):沿着x軸旋轉正旋轉45度
transform:rotate3d(1,1,0,45deg):沿着x軸，y軸，即正中間旋轉旋轉正旋轉45度
           

5.3d呈現 transfrom-style

1控制子元素是否開啟3d元素空間

2.transfrom-style：flat子元素不開腔3d空間，預設的

3.transfrom：preserve-3d，子元素開啟立體空間

4.代碼寫給父級，影響的是子盒子

5.不開啟的話，子元素不會在3d空間旋轉，而是子元素自身旋轉，寫來之後是把父盒變成立體，旋轉，不會影響子盒子的狀态。

案例：翻轉盒子

<style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 讓背面的紫色盒子保留立體空間 給父級添加的 */
            transform-style: preserve-3d;
        }
       
        .box:hover {
            transform: rotateY(180deg);
        }
       
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
       
        .front {
            background-color: pink;
            z-index: 1;
        }
       
        .back {
            background-color: purple;
            /* 像手機一樣 背靠背 旋轉 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">正面</div>
        <div class="back">反面</div>
    </div>
</body>
           

一、CSS3新增選擇器

querySelector
擷取第一個類名為指定參數的元素，
querySelectorAll
擷取指定元素的所有标簽或類名。