css 過度模組

2021-08-06 02:33:23 字數 1367 閱讀 1561

一、a標籤偽類選擇器

1、標籤存在一定的狀態:

1.1、預設狀態:從未被訪問過

1.2、被訪問過的狀態

1.3、滑鼠長按的狀態

1.4、滑鼠懸停在a標籤上的狀態

2、a標籤偽類選擇器是專門用來修改a標籤不同狀態的樣式的

2.1、:link修改從未被訪問過的樣式

a

:link

2.2、:visited修改被訪問過的狀態下的樣式

a

:visited

2.3、:active修改長按狀態下的樣式

a

:active

2.4、:hover修改懸停在a標籤上狀態下的樣式

a:hover

3、注意點

3.1、a標籤的偽類選擇器可以單獨出現,也可以一起出現

3.2、a標籤的偽類選擇器如果一起出現,有嚴格的順序要求:link、visited、hover、active

3.3、如果預設狀態下的樣式和被訪問狀態下的樣式一樣,可以縮寫

a

二、過度模組

1.1、其它標籤也可以使用偽類選擇器:hover,表示懸停在這個標籤上

1.2、過度三要素:過度效果必須要有屬性發生變化;哪個屬性需要執行過度效果;必須告訴系統過度執行時間

1.3、當多個屬性要執行過度效果時,屬性之間、過度時間之間用逗號隔開即可

1.4、過度連寫屬性:

transition:過度屬性 過度時長 運動速度 延遲時間

transition: width 5s linear 0s;

charset="utf-8">

過度模組title>

* div

div:hover

style>

head>

div>

body>

過度彈性效果練習:

charset="utf-8">

過度模組title>

* div

divspan

div:hover

span

style>

head>

1span>

2span>

3span>

4span>

5span>

6span>

7span>

8span>

div>

body>

CSS之 過度模組

當我們學習完偽類選擇器之後,我們可以寫如下的 通過以上的 讓我們把滑鼠放在div上時,會自動的將寬度變為300px。但是這個過程是瞬時的,我們如何將這個過程變的緩慢一點,呈現乙個過渡的效果呢?這就需要我們今天將要學習的知識 過渡效果 分割線 英語很好的同學應該可以知道 過渡 就是transition...

css學習10 過度,動畫和變換屬性

屬性 說明 keyframes 為動畫指定乙個以上的關鍵幀 animation 設定動畫的簡寫屬性 animation delay 指定動畫開始前的延遲時間 animation direction animation duration 指定動畫持續時間 animation iteration cou...

css中的基本簡單動畫與過度效果

css的過渡動畫效果 transform translate transform translate translatex 水平偏移 translatey 垂直偏移 translate x,y 水平垂直偏移 裡面可以寫px或者百分比 百分比參照的是當前盒子的寬和高 所以可以使用translate 5...