a標(biāo)簽的偽類選擇器:專門用來修改不同狀態(tài)的樣式的
1、默認(rèn)狀態(tài)违施,從未被訪問過
格式:
a:link {color: green;} /* 修改從未被訪問過下的狀態(tài)的樣式 */
2瑟幕、被訪問過的狀態(tài)
格式:
a:visited {color: tomato;} /* 修改 被訪問過下的狀態(tài)的樣式 */
3只盹、鼠標(biāo)懸停在標(biāo)簽上的狀態(tài)
格式:
a:hover {color: orange;} /* w修改 鼠標(biāo)懸停在標(biāo)簽上的狀態(tài) 的樣式 */
4、鼠標(biāo)長按的狀態(tài)
格式:
a:active {color: chocolate;} /* 修改 長按狀態(tài) 的樣式 */
——注意點(diǎn)
1排吴、a標(biāo)簽偽選擇器如果一起出現(xiàn)懦鼠,有嚴(yán)格的順序要求:lvha
link -- visited -- hover -- active
默認(rèn) 被訪問 懸停 長按
CSS3 的過渡模塊:
:hover屬性可以監(jiān)聽鼠標(biāo)的懸停狀態(tài),當(dāng)鼠標(biāo)懸停在元素上讓元素發(fā)生一些改變街氢。
鼠標(biāo)懸停改變div的大小
<div class="box01"></div>
.box01 {width: 50px; height: 50px; background-color: red;}
.box01:hover {width: 300px; height: 300px; background-color: green;}
過渡動畫:
.box01 {width: 50px; height: 50px; background-color: red;}
.box01:hover {width: 300px; height: 300px; background-color: green; transition-property: all; transition-duration: 5s;}
/* transition-property: all 代表所有的要改變的屬性需要過渡睦袖,也可單獨(dú)寫一個
transition-duration: 5s 代表過渡需要的時長馅笙,此處是5秒
*
* */
過渡效果三要素:
1、必須要有發(fā)生變化的屬性
2烈和、必須告訴系統(tǒng)哪個屬性需要過渡效果
3皿淋、必須告訴系統(tǒng)變化的時長
4恬试、多個屬性過渡效果的格式:
transition-property: 屬性1 , 屬性2 , 屬性3 ;
transition-duration: 1的時長 , 2的時長 , 3的時長 ;
過渡模塊的其它屬性:
transition-delay:2s; 延遲2秒開始執(zhí)行動畫
transition-timing-function: ; 有五個取值疯暑,用于控制動畫過渡的不同效果
單個屬性過渡的連寫格式:A元素需要過渡
{transition: A 過渡時長 運(yùn)動速度 延遲時長;}
多個屬性過渡的連寫格式:A,B , C元素都需要過渡幻馁,中間以逗號隔開越锈。連寫可省略后面兩個參數(shù)瞪浸,前面兩個不能省略
{transition: A A過渡時長 A運(yùn)動速度 A延遲時長 , B B過渡時長 B運(yùn)動速度 B延遲時長 , C C過渡時長 C運(yùn)動速度 C延遲時長 ;}
需要過渡的屬性太多時的簡寫格式:{transition: all 5s;}
編寫過渡的步驟:
1、搭建基本界面
2钩蚊、修改認(rèn)為需要修改的屬性
3蹈矮、再去給需要過渡的元素添加過渡效果