a標簽的偽類選擇器(用來修改a標簽的不同狀態(tài)的樣式的)

格式

• :link(從未被訪問過)
• :visited(被訪問過)
• :hover(監(jiān)聽鼠標懸停狀態(tài)\不只可以用于a標簽,還可用于其他標簽)
• :active(鼠標長按狀態(tài))

注意點

• 以上屬性同時出現(xiàn)時,必須嚴格按照以上從上至下進行("愛恨原則")
• :link與:visited屬性賦值相同時,可簡寫,直接給a標簽中的color屬性賦值(a{color=XXX})

過渡模塊的使用

例如:

• transition-property:witch,background-color;(不是直接寫在hover里)
• transition-duration:5s,5s;
• transition-timing-function(linear/ease/ease-in/ease-out/____控制速度)
• transition-deley
• 連寫: transition:過度屬性 過渡時長 運動速度 延遲時間(多個屬性用逗號隔開)
  +tips:
  連寫時可省略后面兩個屬性
  如果多個屬性運動的速度/延遲的時間/持續(xù)的時間都一樣,可簡寫:transition:all 5s;

總結

編寫過渡套路

1.不要管過渡, 先編寫基本界面
2.修改我們認為需要修改的屬性
3.再回過頭去給被修改屬性的那個元素添加過渡即可

注意區(qū)別:

 ul:hover li{
            width: 100px;
        }
 ul li:hover{
            width: 460px;
()

2D轉換模塊

• transform:rotate(45deg);_________旋轉
• transform:translate(50px,0px);_______平移
• transform:scale(1.5,1);________縮放
  如果進行多次轉換,中間用空格(不是逗號!)隔開

形變中心點

• transform-origin:(可接受像素/百分比/特殊關鍵詞三種取值)

旋轉軸向

• transform:rotateY(45deg);

透視

• perspective:500px;__________近大遠小 (要添加到他的父元素上)

盒子陰影和文字陰影

1.如何給盒子添加陰影
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影;

2.注意點
2.1盒子的陰影分為內外陰影, 默認情況下就是外陰影
2.2快速添加陰影只需要編寫三個參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默認情況下陰影的顏色和盒子內容的顏色一致

3.如何給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;