资源描述

css过渡2D变幻.docx

《css过渡2D变幻.docx》由会员分享，可在线阅读，更多相关《css过渡2D变幻.docx（25页珍藏版）》请在冰豆网上搜索。

css过渡2D变幻.docx

css过渡2D变幻

1背景颜色过度

DOCTYPEhtml>

transition

描述：

复合属性。

检索或设置对象变换时的过渡。

可以为同一元素的多个属性定义过渡效果。

语法：

transition：

[transition-property]||[transition-duration]||[transition-timing-function]||[transition-delay]

默认值：

看每个独立属性

取值：

[transition-property]：

检索或设置对象中的参与过渡的属性

[transition-duration]：

检索或设置对象过渡的持续时间

[transition-timing-function]：

检索或设置对象中过渡的动画类型

[transition-delay]：

检索或设置对象延迟过渡的时间

-->

请将鼠标移动到下面的矩形上：

背景色过渡

2延迟时间

DOCTYPEhtml>

transition-delay

描述：

检索或设置对象延迟过渡的时间。

如果提供多个属性值，以逗号进行分隔。

语法：

transition-delay：

[,]*

默认值：

取值：

：

指定对象过渡的延迟时间

-->

请将鼠标移动到下面的矩形上：

延迟0.1s后开始过渡

延迟0.3s后开始过渡

延迟0.5s后开始过渡

延迟0.7s后开始过渡

延迟0.9s后开始过渡

3对象过度时间

DOCTYPEhtml>

transition-duration

描述：

检索或设置对象过渡的持续时间。

如果提供多个属性值，以逗号进行分隔。

语法：

transition-duration：

[,]*

默认值：

取值：

：

指定对象过渡的持续时间

-->

请将鼠标移动到下面的矩形上：

矩形在0.5s内慢慢向右移动
transition-duration:

.5s;

4颜色过度

DOCTYPEhtml>

transition-property

描述：

检索或设置对象中的参与过渡的属性。

默认值为：

all。

默认为所有可以进行过渡的css属性。

如果提供多个属性值，以逗号进行分隔。

语法：

transition-property：

all|none|[,]*

默认值：

all

取值：

all：

所有可以进行过渡的css属性

none：

不指定过渡的css属性

：

指定要进行过渡的css属性

-->

请将鼠标移动到下面的矩形上：

本次设置过渡的属性：

border-color,background-color,color

4动画类型

DOCTYPEhtml>

transition-timing-function

描述：

检索或设置对象中过渡的动画类型。

如果提供多个属性值，以逗号进行分隔。

语法：

transition-timing-function：

默认值：

ease

取值：

linear：

线性过渡。

等同于贝塞尔曲线（0.0,0.0,1.0,1.0）

ease：

平滑过渡。

等同于贝塞尔曲线（0.25,0.1,0.25,1.0）

ease-in：

由慢到快。

等同于贝塞尔曲线（0.42,0,1.0,1.0）

ease-out：

由快到慢。

等同于贝塞尔曲线（0,0,0.58,1.0）

ease-in-out：

由慢到快再到慢。

等同于贝塞尔曲线（0.42,0,0.58,1.0）

cubic-bezier（,,,）：

特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

-->