CSS3的一些新特性

1.屬性選擇器

選擇符簡介

e[att]

選擇具有att屬性的e元素

e[att=「val」]

選擇具有att屬性且屬性值等於val的e元素

e[att^=「val」]

匹配具有att屬性，且值以val開頭的e元素

e[att$=「val」]

匹配具有att屬性，且值以val結尾的e元素

e[att*=「val」]

匹配具有att屬性，且值中含有val的e元素

類選擇器、屬性選擇器、偽類選擇器權重為10

2.結構偽類選擇器

選擇符簡介

e:first-child

匹配父元素中的第乙個子元素e

e:last-child

匹配父元素中的最後乙個子元素e

e:nth-child(n)

匹配父元素中的第n個子元素e

e:first-of-type

指定型別e的第乙個

e:last-of-type

指定型別e的最後乙個

e:nth-of-type(n)

指定型別e的第n個

關於nth-child(n):

n可以是數字、關鍵字和公式

常見關鍵字有even(偶數)、odd(奇數)

如果n是公式，則n從0開始算，第0個或超出範圍的元素直接忽略，常見公式有以下幾個:

公式取值

2n偶數

2n+1

奇數5n

5 10 15……

n+5從第5個開始（包含第5個）到最後

-n+5

前5個（包含第5個）

關於nth-of-type(n):

選擇父元素指定型別的第n個子元素

3.偽元素選擇器

選擇符簡介

::before

在元素內部的前面插入內容

::after

在元素內部的後面插入內容

一些注意點：

before和after必須有content屬性

before在內容的前面，after在內容的後面

before和after建立乙個元素，但是屬於行內元素

因為在dom裡面看不見剛才建立的元素，所以我們稱為偽元素

偽元素和標籤選擇器一樣，權重為1

轉換是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果

2d轉換是改變標籤在二維平面上的位置和形狀的一種技術

1.2d轉換之移動

語法：

transform: translate(x,y);

x就是x軸上移動的位置，y就是y軸上移動的位置，如

transform: translate(100px, 100px);

也可以分開寫：

transform: translatex(n);

transform: translatey(n);

一些注意：

定義2d轉換中的移動，沿著x和y軸移動元素

translate最大的優點就是不會影響到其他元素的位置

translate中的百分比單位是相對於自身元素的translate(50%,50%);

對行內標籤沒有效果

2.2d轉換之旋轉

語法：

transform: rotate(度數);

一些注意：

rotate裡面的度數單位是deg

角度為正時是順時針，角度為負時是逆時針

預設旋轉的中心點是元素的中心點

設定元素轉換中心點transform-origin：x y;

transform-origin: 100px 100px;

x y預設轉換中心點（50% 50%）

還可以給x y設定方位名詞（top bottom left right center）

3.2d旋轉之縮放

語法：

transform: scale(x,y);

一些注意：

transform:scale(1,1)寬和高都放大一倍，相當於沒有放大

transform:scale(2,2)寬和高都放大兩倍

transform:scale(2)相當於transform:scale(2,2)

transform:scale(0.5,0.5)縮小

scale縮放可以設定轉換中心點縮放，預設以中心點縮放，而且不影響其他盒子

動畫是css3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制乙個或一組動畫，常用來實現複雜的動畫效果

1.動畫的基本使用

製作動畫分為兩步：

1.先定義動畫

用keyframes定義動畫

@keyframes move 
100%
} @keyframes move 25%
50%75%
100%
}

div

屬性

描述@keyframes

規定動畫

animation

所有動畫屬性的簡寫屬性，除了animation-play-state屬性

animation-name

規定@keyframes動畫的名稱，不能為空

animation-duration

規定動畫完成的乙個週期所花費的秒或毫秒，預設是0，不能為空

animation-timing-function

規定動畫的速度曲線，預設是ease

animation-delay

規定動畫何時開始，預設是0

animation-iteration-count

animation-direction

animation-play-state

規定動畫是否正在執行或暫停，預設是running，還有pause

animation-fill-mode

規定動畫結束後狀態，保持forwards，回到起始backwards

x軸：水平向右(右正左負)

y軸：垂直向下(下正上負)

z軸：垂直螢幕(外正裡負)

1.3d位移

語法：

/* 僅在x軸移動 */
transform:
translatex
(100px)
;/* 僅在y軸移動 */
transform:
translatey
(100px)
;/* 僅在z軸移動，z軸方向單位為px */
transform:
translatez
(100px)
;/* x,y,z軸方向都要移動 */
transform:
translate3d
(100px，100px，100px)
;

3d移動比2d多了乙個可移動的z軸

2.透視

如果想要在網頁中產生3d效果需要透視

模擬人類的視覺位置，可認為安排乙隻眼去看

透視也稱為視距：人的眼睛到螢幕的距離

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

透視的單位是畫素透視寫在被觀察元素的父元素上

3.3d旋轉

3d旋轉可以讓元素在三位平面內沿著x軸，y軸，z軸或自定義軸進行旋轉

語法：

transform:
rotatex
(45deg)
; transform:
rotatey
(45deg)
; transform:
rotatez
(45deg)
;

自定義旋轉軸(向量)：

transform: rotate3d(x,y,z,deg);

transform:
rotate3d(1
,0,0
,45deg)
;

4.3d呈現

控制子元素是否開啟三維立體環境

/* 開啟3d立體空間 */ transform-style: preserve- 3d;/* 不開啟3d立體空間 */

transform-style: flat;

**寫給父級，但是影響的是子盒子

css3的一些新特性

background rgba 254,255,200,0.75 例如上面所示，前三個引數分別是分別是 r g b 三原色，範圍是 0 255。第四個引數是背景透明度，範圍是 0 1，如 0.5 代表透明度 50 這個屬性使我們在瀏覽器中也可以做到像 win7 一樣的半透明玻璃效果。css3圓角示...

css3的一些新特性

css3新增的一些特性 1.屬性選擇器 2.結構偽類選擇器 3.偽元素選擇器 4.2d轉換 5.動畫 6.3d轉換 7.遊覽器私有字首一.屬性選擇器選擇符簡介舉例e att 選擇具有att的e元素 button disabled e att val 選擇具有att屬性且屬性等於val的e元素 ...

CSS3的一些新特性

css3的一些新特性

css3的一些新特性

css3的一些新特性

相關推薦