a標(biāo)簽的偽類(lèi)選擇器(用來(lái)修改a標(biāo)簽的不同狀態(tài)的樣式的)
格式
- :link(從未被訪(fǎng)問(wèn)過(guò))
- :visited(被訪(fǎng)問(wèn)過(guò))
- :hover(監(jiān)聽(tīng)鼠標(biāo)懸停狀態(tài)\不只可以用于a標(biāo)簽,還可用于其他標(biāo)簽)
- :active(鼠標(biāo)長(zhǎng)按狀態(tài))
注意點(diǎn)
- 以上屬性同時(shí)出現(xiàn)時(shí),必須嚴(yán)格按照以上從上至下進(jìn)行("愛(ài)恨原則")
- :link與:visited屬性賦值相同時(shí),可簡(jiǎn)寫(xiě),直接給a標(biāo)簽中的color屬性賦值(a{color=XXX})
過(guò)渡模塊的使用
例如:
- transition-property:witch,background-color;(不是直接寫(xiě)在hover里)
- transition-duration:5s,5s;
- transition-timing-function(linear/ease/ease-in/ease-out/____控制速度)
- transition-deley
- 連寫(xiě): transition:過(guò)度屬性 過(guò)渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間(多個(gè)屬性用逗號(hào)隔開(kāi))
+tips:
連寫(xiě)時(shí)可省略后面兩個(gè)屬性
如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)的時(shí)間都一樣,可簡(jiǎn)寫(xiě):transition:all 5s;
總結(jié)
編寫(xiě)過(guò)渡套路
1.不要管過(guò)渡, 先編寫(xiě)基本界面
2.修改我們認(rèn)為需要修改的屬性
3.再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可
注意區(qū)別:
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
()
2D轉(zhuǎn)換模塊
- transform:rotate(45deg);_________旋轉(zhuǎn)
- transform:translate(50px,0px);_______平移
- transform:scale(1.5,1);________縮放
如果進(jìn)行多次轉(zhuǎn)換,中間用空格(不是逗號(hào)!)隔開(kāi)
形變中心點(diǎn)
- transform-origin:(可接受像素/百分比/特殊關(guān)鍵詞三種取值)
旋轉(zhuǎn)軸向
- transform:rotateY(45deg);
透視
- perspective:500px;__________近大遠(yuǎn)小 (要添加到他的父元素上)
盒子陰影和文字陰影
1.如何給盒子添加陰影
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;
2.注意點(diǎn)
2.1盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
2.2快速添加陰影只需要編寫(xiě)三個(gè)參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
3.如何給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
