資源簡介

(共24張PPT)
使用CSS3編寫各種動態效果
R&D incubation -
Base
過渡的使用方法
CSS3 2D 轉換
CSS3 動畫
過渡
什么是過渡？
是我們可以在不使用 Flash 動畫或JavaScript的情況下，讓元素從一種樣式變換為
另一種樣式時為元素添加的效果，需要使用屬性transition。
(注:涉及到CSS3過渡的，需要結合 :hover 偽類來實現過渡效果)
CSS3中transition過渡屬性
1.transition-property：定義轉換動畫的CSS屬性名稱，寬度高度、背景顏色、內外邊距
都可以。如果想要所有的屬性都使用過渡，寫一個 all 就可以。
2.transition-duration：過渡的持續時間,即從設置舊樣式到換新樣式所花費的時間，單
位為秒（s）。
CSS3中transition過渡屬性
3.transition-timing-function：過渡的速度曲線,通過給過渡添加一個函數來指定
動畫的快慢方式。
ease：默認值，慢速開始，然后變快，然后慢速結束
linear：速度勻速
ease-in：速度越來越快
ease-out：速度越來越慢
ease-in-out：速度先加速再減速
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ）
steps（） 實現一個關鍵逐幀動畫的功能
CSS3中transition過渡屬性
4.transition-delay：過渡的延遲時間。
0：默認值，元素過渡效果立即執行
正值：元素過渡效果不會立即觸發，當過了設置的時間值后才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷
CSS3中transition過渡屬性
5.transition 復合屬性
用于在一個屬性中同時設置四個過渡屬性
transition:all 5s linear 2s
CSS3 2D 轉換-2D位移
基本語法：transform:translate();
將元素在水平或垂直方向上移動指定距離
translate(參數1,參數2):水平方向平移和垂直方向位移
translate(參數):只能實現水平方向的移動
translateX(參數):水平方向位移
translateY(參數):垂直方向位移
CSS3 2D 轉換-2D縮放
基本語法：transform:scale(參數);
對元素進行水平或垂直方向的縮放
scale(參數)：沿著x軸y軸放大縮小n倍
scale(參數1,參數2)：沿著水平放大縮小x倍，沿著垂直方向放大縮小y倍
scaleX(參數)：沿著水平方向放大縮小倍數
scaleY(參數)：沿著垂直方向放大縮小倍數
CSS3 2D 轉換-2D旋轉
基本語法：transform:rotate()。
對元素進行旋轉,取值使用度數(deg),正值為順時針，負值為逆時針。
rotate(參數):圍繞元素的正中心進行旋轉
rotateX(參數):圍繞x軸進行旋轉
rotateY(參數):圍繞y軸進行旋轉
改變元素基點：transform-origin:水平方向 垂直方向;
用來設置元素的運動的基點（參照點）,默認點是元素的中心點。其中設置的值可以是百分值,
em,px，其中水平方向也可以是字符參數值left,center,right；垂直方向和水平方向一樣除了
百分值外還可以設置字符參數值top,center,bottom。
CSS3 2D 轉換-2D傾斜
基本語法：transform:skew()。
使元素按一定的角度進行傾斜，可為負值。
skew(參數1，參數2)：在水平方向、垂直方向上傾斜
skew(參數)：在水平方向上傾斜，第二個參數不寫默認為0
skewX(參數)：按照X軸方向傾斜
skewY(參數)：按照Y軸方向傾斜
注：如果是正值的情況下：X軸往右、Y軸往下
如果是負值的情況下：X軸往左、Y軸往上
CSS3 動畫
什么是CSS3動畫？
可以通過每一幀來進行動畫效果的展示，并且可以完美調用每一幀，常用來實現復雜的動畫
效果，可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
使用CSS3動畫的步驟？
1.定義關鍵幀。
2.調用關鍵幀。
定義關鍵幀
方法1：使用關鍵字
@keyframes 關鍵幀名字{
from{
初始狀態
}
to{
結束狀態
}
}
定義關鍵幀
方法2：使用百分比
@keyframes 關鍵幀名字{
0%{
初始狀態
}
100%{
結束狀態
}
}
調用關鍵幀的animation動畫屬性。
1.animation-name：規定 @keyframes 動畫的名稱。
2.animation-duration：規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
3.animation-timing-function：規定動畫的速度曲線，ease;ease-in;ease-in-out;linear;
cubic-bezier，steps()。
4.animation-delay：規定動畫何時開始。默認是 0。
5.animation-iteration-count：規定動畫被播放的次數。默認是 1，可以設置為infinite。
用關鍵幀的animation動畫屬性。
6.animation 復合屬性
用于在一個屬性中同時設置多個動畫屬性
animation:關鍵幀名字 持續時間 速度曲線 延遲時間 規定動畫播放次數等。
2023
本章結束
The Best R&D Courses
R&D incubation -
Base

展開更多......

收起↑