思潮课程 / 前端开发 / 正文

css3transition

2024-12-19前端开发阅读 6

CSS3中的`transition`特点答应你为一个元素的不同状况（如悬停、聚集、点击等）增加过渡作用，使状况改动愈加滑润。`transition`特点可以使用于任何CSS特点，包含色彩、方位、巨细、形状等。

`transition`特点的根本语法如下：

```csstransition: property duration timingfunction delay;```

`property`: 指定要过渡的CSS特点。你可以指定一个特点，也可以用逗号分隔指定多个特点。 `duration`: 过渡作用的继续时刻，单位可以是秒或毫秒。 `timingfunction`: 过渡作用的速度曲线，常见的有`ease`、`linear`、`easein`、`easeout`、`easeinout`等。 `delay`: 过渡作用开端前的推迟时刻，单位可以是秒或毫秒。

例如，假如你想为一个按钮在悬停时改动布景色彩，并增加一个过渡作用，可以这样做：

```cssbutton { backgroundcolor: blue; transition: backgroundcolor 0.5s ease 0s;}

button:hover { backgroundcolor: red;}```

在这个比如中，按钮的布景色彩会在悬停时从蓝色过渡到赤色，过渡作用继续0.5秒，速度曲线为`ease`，没有推迟。

你可以根据需求为不同的CSS特点和状况增加过渡作用，以完成更丰厚的视觉作用。

CSS3 Transition：滑润过渡的艺术