CSS3常用的屬性有哪些

這篇文章主要介紹“CSS3常用的屬性有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3常用的屬性有哪些”文章能幫助大家解決問題。

選擇器

• value1~value2

p~ul 選擇p元素里面的ul

• [attribute^=value]

a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素

• [attribute$=value]

a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素

• [attribute*=value]

a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素

• :first-of-type

p:first-of-type	選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素

• :last-of-type

p:last-of-type選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素

• :only-of-type

p:only-of-type選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素

• :only-child

p:only-child選擇屬于其父元素的唯一子元素的每個 <p> 元素

• :nth-child(n)

p:nth-child(2)選擇屬于其父元素的第二個子元素的每個 <p> 元素

• :nth-last-child(n)

p:nth-last-child(2)同上，從最后一個子元素開始計數

• :nth-of-type(n)

p:nth-of-type(2)選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素

• :nth-last-of-type(n)

p:nth-last-of-type(2)	同上，但是從最后一個子元素開始計數

• :last-child

p:last-child選擇屬于其父元素最后一個子元素每個 <p> 元素

• :root

:root	選擇文檔的根元素

• :empty

p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節點）

• :target

#news:target選擇當前活動的 #news 元素

• :enabled

input:enabled	選擇每個啟用的 <input> 元素

• :disabled

input:disabled選擇每個禁用的 <input> 元素

• :checked

input:checked選擇每個被選中的 <input> 元素

• :not(selector)

:not(p)選擇非 <p> 元素的每個元素

• ::selection

::selection選擇被用戶選取的元素部分

動畫 animation

@keyframes 讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式，來控制CSS動畫的中間環節

animation: name duration timing-function delay iteration-count direction;
animation-name	規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

• @keyframes animation-name {keyframes-selector {css-styles;}}

animationname 定義動畫的名稱
keyframes-selector 動畫時長的百分比。合法的值：0-100%from（與 0% 相同）to（與 100% 相同） 
css-styles 必需。一個或多個合法的 CSS 樣式屬性

• animation-fill-mode

- none 默認值，回到初始狀態
- forwards 當動畫完成后，保持最后一個屬性值
- both 根據animation-direction輪流應用forwards和backwards規則
- backwards 在 animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。

• animation-play-state

- running 播放
- paused 暫停

2D/3D 轉換屬性

• 2D變形（translate）

• translate 第一個參數指定X軸的位移，第二個參數指定Y軸的位移

translateX 指定X軸的位移
translateY 指定Y軸的位移
translateZ 指定Z軸的位移
translate3D 第一個參數指定X軸的位移, 第二個參數指定Y軸的位移, 第三個參數指定Z軸的位移

• 3D變形（transform）

• translate 位移

• rotate 旋轉

rotate3D(): 3D旋轉，必須指定四個參數，前3個參數分別表示旋轉的方向x y z, 第4個參數表示旋轉的角度;
rotateX(): 指定X軸的旋轉角度;
rotateY(): 指定Y軸的旋轉角度;
rotateZ(): 指定Z軸的旋轉角度;

• scale 縮放

scale(x,y) 定義 2D 縮放轉換。 
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX 通過設置 X 軸的值來定義縮放轉換。 
scaleY 通過設置 Y 軸的值來定義縮放轉換。 
scaleZ 通過設置 Z 軸的值來定義 3D 縮放轉換

• skew 斜切

- skew 第一個參數對應X軸[必須], 第二個參數對應Y軸[當不設置時, 默認為0];;
- skewX 指定X軸的斜切;
- skewY 指定Y軸的斜切;

關于“CSS3常用的屬性有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。