設置樣式的過度效果
transition-property: none/all;
transition-duration:2s;運動時間,默認是0秒
transition-delay:0s; 延遲時間默認0秒
transition-timing-function:ease;逐漸變慢(默認)
linear勻速 ease-in加速 ease-out減速 ease-in-out先加速再減速*/
1,樣式 持續時間 延時 可連寫多組每個樣式之間使用','隔開
.過度的樣式 可以同時指定多個
1,過度的時間 2,過度的樣式
transition: 1s width , 2s height , 1s background;
2. 過度的形式
貝塞爾曲線很重要 幾乎所有的都能用貝塞爾曲線做出來
網址:http://cubic-bezier.com/#.14,.63,.79,.21
偽類選擇器,光標移動到上面時觸發,產生動畫效果
-------------------------------------------------
transform: 形變屬性
平移:translate
平移:translate 給定坐標, 沿着做標軸移動
第一個參數:x軸坐標 第二個參數:y軸坐標 以自身作為參照
可給 數值或者百分比%
旋轉角度 單位是deg 以自身中心作為旋轉中心
正數沿着順時針方向 負數逆時針方向
設置形變參考原點 默認值是center top bottom left right
transform: rotateX(45deg);
transform: rotateY(45deg);
scale() 縮放倍數
transform: scale(2.0, 0.5)
大於1表示放大 1以下代表縮小
盒子里的內容也會跟着一起縮放
transform-origin: left; 縮放的原點
transform: scale(0.2, 0.5); 參數XY
transform: scaleX(0.5); 沿着X軸
transform: scaleY(.4); 沿着Y軸
skew() 傾斜
X軸的傾斜:正數逆時針
Y軸的傾斜:正數順時針
傾斜指的是XY軸的傾斜
transform-origin: left; 設置傾斜的原點
transform: skew(30deg, 30deg); 參數XY
transform: skewX(30deg); 沿着X軸
transform: skewY(30deg); 沿着Y軸
