CSS3 过渡效果教程

CSS3 过渡效果可以让网页元素的变化更加平滑和自然。通过简单的属性，你可以实现元素的渐变效果，比如颜色、位置、大小等。

基本用法

要实现过渡效果，你需要在元素的样式上设置 transition 属性。以下是一个简单的例子：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

.box:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在 .box 元素上时，其宽度会在 2 秒内从 100px 渐变到 200px。

属性详解

transition: 定义元素过渡效果的属性。
transition-property: 指定需要过渡的 CSS 属性。
transition-duration: 指定过渡效果的持续时间。
transition-timing-function: 指定过渡效果的时序函数。
transition-delay: 指定过渡效果的延迟时间。

实例

假设你想要实现一个按钮在点击后，背景颜色和边框颜色逐渐变化的效果，可以这样做：

.button {
  background-color: blue;
  border: 2px solid white;
  padding: 10px 20px;
  transition: background-color 0.5s, border-color 0.5s;
}

.button:active {
  background-color: red;
  border-color: black;
}

扩展阅读

想要了解更多关于 CSS3 过渡效果的技巧和用法，可以阅读本站的 CSS3 过渡效果高级教程。