您可以使用「CSS 轉變」面板,建立、修改及刪除 CSS3 轉變。

若要建立 CSS3 轉變,請指定元素的轉變屬性值,建立轉變類別。若在建立轉變類別之前選取元素,轉變類別會自動套用至所選取的元素。

您可以選擇將所產生的 CSS 程式碼加入目前的文件,或指定外部的 CSS 檔案。

建立及套用 CSS3 轉變效果

  1. (選擇性) 選取您要套用轉變的元素 (段落、標題等等)。此外,您也可以先建立轉變,稍後再套用至元素。

  2. 選取「視窗 > CSS 轉變」。

  3. 按一下

  4. 使用「新增轉變」對話方塊中的選項,建立轉變類別。

    目標規則

    輸入選取器的名稱。選取器可以是任何 CSS 選取器,例如標籤、規則、ID 或複合選取器。例如,如果您想要將轉變效果新增至所有 <hr> 標籤,請輸入 hr

    開啟轉變

    選取您想要套用轉變的狀態。例如,如果您想要在滑鼠停留在元素上方時套用轉變,請使用「hover」選項。

    針對所有屬性使用相同的轉變

    如果您想要針對所有要轉變的 CSS 屬性指定相同的「持續時間」、「延遲」和「計時函式」,請選取此選項。

    針對每個屬性使用不同的轉變

    如果您想要針對每個要轉變的 CSS 屬性指定不同的「持續時間」、「延遲」和「計時函式」,請選取此選項。

    屬性

    按一下 以新增要轉變的 CSS 屬性。

    持續時間

    以秒數或毫秒數輸入轉變效果的持續時間。

    Delay

    轉變效果啟動之前的時間 (以秒或毫秒為單位)。

    計時函式

    從可用的選項中選取轉變樣式。

    結束值

    轉變效果的結束值。例如,若要在轉變效果結束時,將字體大小增加到 40px,請將字體大小屬性指定為 40px。

    選擇在何處建立轉變

    若要在目前的文件中嵌入樣式,請選取「只有此文件」。

    如果您想要建立 CSS3 程式碼的外部樣式表,請選取「新增樣式表檔」。按一下「建立轉變」時,系統會提示您選取要儲存新 CSS 檔的位置。建立樣式表之後,此樣式表會新增至「選擇在何處建立轉變」選單。

編輯 CSS3 轉變效果

  1. 在「CSS 轉變」面板中,選取您要編輯的轉變效果。

  2. 按一下  .

  3. 使用「編輯轉變」對話框,更改先前針對轉變輸入的值。

停用轉變的 CSS 速記

  1. 選取「編輯 > 偏好設定」。

  2. 選取「CSS 樣式」。

  3. 在「在下列項目使用速記」中取消選取「轉變」。


此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策