a標(biāo)簽的偽類(lèi)選擇器
1.通過(guò)我們的觀察發(fā)現(xiàn)a標(biāo)簽存在一定的狀態(tài)
1.1默認(rèn)狀態(tài), 從未被訪問(wèn)過(guò)
1.2被訪問(wèn)過(guò)的狀態(tài)
1.3鼠標(biāo)長(zhǎng)按狀態(tài)
1.4鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)
2.什么是a標(biāo)簽的偽類(lèi)選擇器?
a標(biāo)簽的偽類(lèi)選擇器是專(zhuān)門(mén)用來(lái)修改a標(biāo)簽不同狀態(tài)的樣式的
3.格式
:link 修改從未被訪問(wèn)過(guò)狀態(tài)下的樣式
:visited 修改被訪問(wèn)過(guò)的狀態(tài)下的樣式
:hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
:active 修改鼠標(biāo)長(zhǎng)按狀態(tài)下的樣式
<style>
/*
a:link{
color: tomato;
}
a:visited{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}
*/
a{
// 簡(jiǎn)寫(xiě)格式
color: green;
}
/*a:link{*/
/*color: green;*/
/*}*/
/*a:visited{*/
/*color: green;*/
/*}*/
a:hover{
color: orange;
}
a:active{
color: pink;
}
- 4.注意點(diǎn)
- 4.1a標(biāo)簽的偽類(lèi)選擇器可以單獨(dú)出現(xiàn)也可以一起出現(xiàn)
- 4.2a標(biāo)簽的偽類(lèi)選擇器如果一起出現(xiàn), 那么有嚴(yán)格的順序要求
- 編寫(xiě)的順序必須要個(gè)的遵守愛(ài)恨原則 love hate
- 4.3如果默認(rèn)狀態(tài)的樣式和被訪問(wèn)過(guò)狀態(tài)的樣式一樣, 那么可以縮寫(xiě)
過(guò)渡模塊
1,過(guò)渡三要素
1.1必須要有屬性發(fā)生變化
1.2必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果
1.3必須告訴系統(tǒng)過(guò)渡效果持續(xù)時(shí)長(zhǎng)
2.注意點(diǎn)
當(dāng)多個(gè)屬性需要同時(shí)執(zhí)行過(guò)渡效果時(shí)用逗號(hào)隔開(kāi)即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
- 示例代碼
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 50px;
background-color: red;
/*告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果*/
transition-property: width, background-color;
/*告訴系統(tǒng)過(guò)渡效果持續(xù)的時(shí)長(zhǎng)*/
transition-duration: 5s, 5s;
/*transition-property: background-color;*/
/*transition-duration: 5s;*/
}
/*:hover這個(gè)偽類(lèi)選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
div:hover{
width: 300px;
background-color: blue;
}
</style>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 50px;
background-color: red;
/*告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果*/
transition-property: width, background-color;
/*告訴系統(tǒng)過(guò)渡效果持續(xù)的時(shí)長(zhǎng)*/
transition-duration: 5s, 5s;
/*transition-property: background-color;*/
/*transition-duration: 5s;*/
}
/*:hover這個(gè)偽類(lèi)選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
div:hover{
width: 300px;
background-color: blue;
}
</style>
過(guò)渡模塊的其他屬性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>89-過(guò)渡模塊-其它屬性</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
/*告訴系統(tǒng)延遲多少秒之后才開(kāi)始過(guò)渡動(dòng)畫(huà)*/
/*transition-delay: 2s;*/
}
div:hover{
width: 300px;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
background-color: pink;
border: 1px solid #000;
}
ul li{
list-style: none;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: blue;
transition-property: margin-left;
transition-duration: 10s;
}
ul:hover li{
margin-left: 700px;
}
ul li:nth-child(1){
/*告訴系統(tǒng)過(guò)渡動(dòng)畫(huà)的運(yùn)動(dòng)的速度*/
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<!--<div></div>-->
<ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
</body>
</html>
過(guò)渡模塊連寫(xiě)
1.過(guò)渡連寫(xiě)格式
transition: 過(guò)渡屬性 過(guò)渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;
2.過(guò)渡連寫(xiě)注意點(diǎn)
2.1和分開(kāi)寫(xiě)一樣, 如果想給多個(gè)屬性添加過(guò)渡效果也是用逗號(hào)隔開(kāi)即可
2.2連寫(xiě)的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉?xiě)了前面的兩個(gè)參數(shù)就已經(jīng)滿(mǎn)足了過(guò)渡的三要素
2.3如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡(jiǎn)寫(xiě)為
transition:all 0s;1.編寫(xiě)過(guò)渡套路
1.1不要管過(guò)渡, 先編寫(xiě)基本界面
1.2修改我們認(rèn)為需要修改的屬性
1.3再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可
