background-image設(shè)置圖片漸變
徑向漸變
直接書寫兩個顏色值琳猫,那么就會在0和100%之間進(jìn)行線性漸變 從上至下進(jìn)行線性漸變。
無論直接寫多少個顏色值娜汁,它總會平分漸變
background:linear-gradient
linear-gradient第一個參數(shù)可以設(shè)置方向
坐標(biāo)軸也可以自定義角度都弹,y軸的正反向是上仁锯,為0度 順時針旋轉(zhuǎn)
在每個顏色值后邊添加百分比,可以控制這個顏色怎么過度到這里
當(dāng)百分比不是由0開始 或不是100結(jié)束只有在百分比區(qū)域過度此洲,其他區(qū)域顯示最近的顏色
重復(fù)漸變
repeating
背景圖裁剪 以文字裁剪
徑向漸變
background:redial-gradient
默認(rèn)百分百在離圓心的最圓角
過渡動畫
要過渡的屬性如果全部則寫all
動畫時間
transition-duration
動畫過渡類型
transition-timinmg-function
js可以觸發(fā)過渡動畫
2D變換
都是transform屬性
rotate:旋轉(zhuǎn)
rotateX沿著X軸旋轉(zhuǎn)當(dāng)值為正的時候 頂部朝里旋轉(zhuǎn)厂汗,當(dāng)值為負(fù)的時候頂部朝外旋轉(zhuǎn)
rotateY沿著Y軸旋轉(zhuǎn)當(dāng)值為正的時候 左側(cè)朝外旋轉(zhuǎn),當(dāng)值為負(fù)的時候頂部朝里旋轉(zhuǎn)
rotate元素默認(rèn)直接沿著中心點順時針(值為負(fù))或逆時針旋轉(zhuǎn)(值為正)呜师,
skew:扭曲
skewX是沿著X控制扭曲 當(dāng)值為正頭向左邊扭娶桦,否則頭向右邊扭
skewY是沿著Y控制扭曲 當(dāng)值為Y正 左側(cè)向上扭 否則左側(cè)向下扭
skew()是合寫 兩個參數(shù)一個是X一個是Y
如果只有一個值默認(rèn)X
scale
scaleX默認(rèn)沿著中心點縮放
scale兩個值的時候代表X和Y一起縮放
scale跟一個值的時候,代表X和y一起縮放
translate
translateX為正向右移動
translateY為負(fù)向上移動
translate兩個值分別代表X和Y
translate如果書寫一個值只代表一個值
translate書寫百分比是相對于自身的寬和高
當(dāng)元素旋轉(zhuǎn)的時候汁汗,坐標(biāo)軸會跟著旋轉(zhuǎn)