可以使用“CSS 过渡效果”面板创建、修改和删除 CSS3 过渡效果。

要创建 CSS3 过渡效果，请通过为元素的过渡效果属性指定值来创建过渡效果类。如果在创建过渡效果类之前选择元素，则过渡效果类会自动应用于选定的元素。

可以选择将生成的 CSS 代码添加到当前文档中，或指定外部 CSS 文件。

创建并应用 CSS3 过渡效果                                            

  • （可选）选择想要应用过渡效果的元素（段落、标题等）。或者，也可以创建过渡效果并稍后将其应用到元素。

  • 选择“窗口”>“CSS 过渡效果”。

  • 单击 。

  • 使用“新建过渡效果”对话框中的选项创建过渡效果类。

    目标规则

    输入选择器名称。选择器可以是任意 CSS 选择器，如标签、规则、ID 或复合选择器。例如，如果希望将过渡效果添加到所有  <hr> 标记，请输入 hr。

    过渡效果开启

    选择要应用过渡效果的状态。例如，如果想要在鼠标移至元素上时应用过渡效果，请使用“悬停”选项。

    对所有属性使用相同的过渡效果

    如果希望为要过渡的所有 CSS 属性指定相同的“持续时间”、“延迟”和“计时功能”，请选择此选项。

    对每个属性使用不同的过渡效果

    如果希望为要过渡的每个 CSS 属性指定不同的“持续时间”、“延迟”和“计时功能”，请选择此选项。

    属性

    单击 以向过渡效果添加 CSS 属性。

    持续时间

    以秒 (s) 或毫秒 (ms) 为单位输入过渡效果的持续时间。

    延迟

    时间，以秒或毫秒为单位，在过渡效果开始之前。

    计时功能

    从可用选项中选择过渡效果样式。

    结束值

    过渡效果的结果值。例如，如果想要字体大小在过渡效果的结尾增加到 40px，请为字体大小属性指定 40px。

    选择过渡的创建位置

    若要在当前文档中嵌入样式，请选择“仅对该文档”。

    如果希望为 CSS3 代码创建外部样式表，请选择“新建样式表文件”。 单击“创建过渡效果”后，系统会提示您提供一个位置来保存新的 CSS 文件。在创建样式表之后，它将被添加到“选择过渡的创建位置”菜单中。

编辑 CSS3 过渡效果                                        

    • 在“CSS 过渡效果”面板中，选择想要编辑的过渡效果。

    • 单击 。

    • 使用“编辑过渡效果”对话框来更改以前为过渡效果输入的值。

对过渡效果禁用 CSS 速记                                        

    • 选择“编辑”>“首选参数”。

    • 选择“CSS 样式”。

    • 在“使用速记”中，取消选择“过渡效果”。

       


,