一. a標(biāo)簽的偽類選擇器
a標(biāo)簽
1.通過我們的觀察發(fā)現(xiàn)a標(biāo)簽存在一定的狀態(tài)
- 1.1默認(rèn)狀態(tài), 從未被訪問過
- 1.2被訪問過的狀態(tài)
- 1.3鼠標(biāo)長按狀態(tài)
- 1.4鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)
2.什么是a標(biāo)簽的偽類選擇器?
- a標(biāo)簽的偽類選擇器是專門用來修改a標(biāo)簽不同狀態(tài)的樣式的
3.格式
- :link 修改從未被訪問過狀態(tài)下的樣式
- :visited 修改被訪問過的狀態(tài)下的樣式
- :hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
- :active 修改鼠標(biāo)長按狀態(tài)下的樣式
a:link{
color: tomato;
}
a:visited{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}
4.注意點(diǎn)
- 4.1a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)也可以一起出現(xiàn)
- 4.2a標(biāo)簽的偽類選擇器如果一起出現(xiàn), 那么有嚴(yán)格的順序要求
編寫的順序必須要個(gè)的遵守愛恨原則 love hate - 4.3如果默認(rèn)狀態(tài)的樣式和被訪問過狀態(tài)的樣式一樣, 那么可以縮寫
a{
// 簡寫格式
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}
二 :a標(biāo)簽的偽類選擇器練習(xí)
1.在企業(yè)開發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
2.在企業(yè)開發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中(顯示模式/寬度/高度/padding/margin)
3.在企業(yè)開發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中
ul li a{
width: 120px;
height: 40px;
display: inline-block;
}
ul li a:link{
background-color: pink;
color: white;
text-decoration: none;
}
ul li a:hover{
color: red;
background-color: #ccc;
}
ul li a:active{
color: yellow;
}
三. 過渡模塊
div{
width: 100px;
height: 50px;
background-color: red;
/*告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過渡效果*/
transition-property: width, background-color;
/*告訴系統(tǒng)過渡效果持續(xù)的時(shí)長*/
transition-duration: 5s, 5s;
/*transition-property: background-color;*/
/*transition-duration: 5s;*/
}
/*:hover這個(gè)偽類選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
div:hover{
width: 300px;
background-color: blue;
}
######1,過渡三要素
1.1必須要有屬性發(fā)生變化
1.2必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過渡效果
1.3必須告訴系統(tǒng)過渡效果持續(xù)時(shí)長
######2.注意點(diǎn)
當(dāng)多個(gè)屬性需要同時(shí)執(zhí)行過渡效果時(shí)用逗號(hào)隔開即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
###四. 過渡模塊-其它屬性
> transition-delay: 2s; //告訴系統(tǒng)延遲多少秒之后才開始過渡動(dòng)畫
transition-timing-function: linear; //告訴系統(tǒng)過渡動(dòng)畫的運(yùn)動(dòng)的速度
###### transition-timing-function: 有五個(gè)取值 linear, ease , ease-in , ease-out , ease-in-out
###五. 過渡連寫格式
>######1.過渡連寫格式
transition: 過渡屬性 過渡時(shí)長 運(yùn)動(dòng)速度 延遲時(shí)間;
transition: background-color 5s linear 0s;
>######2.過渡連寫注意點(diǎn)
2.1和分開寫一樣, 如果想給多個(gè)屬性添加過渡效果也是用逗號(hào)隔開即可
transition: width 5s linear 0s,background-color 5s linear 0s;
2.2連寫的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉懥饲懊娴膬蓚€(gè)參數(shù)就已經(jīng)滿足了過渡的三要素
transition: width 5s,background-color 5s,height 5s;
2.3如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡寫為:
transition:all 5s;
###六. 編寫過渡套路
>1.1不要管過渡, 先編寫基本界面
1.2修改我們認(rèn)為需要修改的屬性
1.3再回過頭去給被修改屬性的那個(gè)元素添加過渡即可
###七. 彈性效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>91-過渡模塊-彈性效果</title>
<style>
{
margin: 0;
padding: 0;
}
div{
height: 100px;
background-color: red;
margin-top: 100px;
text-align: center;
line-height: 100px;
}
div span{
font-size: 80px;
/transition-property: margin;/
/transition-duration: 3s;*/
transition: margin 3s;
}
div:hover span{
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<span>呼</span>
<span>倫</span>
<span>貝</span>
<span>爾</span>
<span>大</span>
<span>草</span>
<span>原</span>
<span>兒</span>
</div>
</body>
</html>
### 八. 手風(fēng)琴效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>92-過渡模塊-手風(fēng)琴效果</title>
<style>
{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 300px;
background-color: red;
float: left;
/border: 1px solid #000;/
/box-sizing: border-box;/
/transition-property: width;/
/transition-duration: 0.5s;*/
transition: width 0.5s;
}
ul:hover li{
width: 100px; //ul 被hover 所得li寬度都變成100px
}
ul li:hover{
width: 460px; //更具體掐隐，優(yōu)先級(jí)更高 只有被hover 的li 才會(huì)變寬
}
</style>
</head>
<body>
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</body>
</html>
