css transition属性详解

作者：_永恒灬莫言发布日期:2026-03-21 浏览:31

/* 示例代码：使用 CSS transition 实现简单的颜色和大小过渡效果 */

/* 定义一个基础的 div 样式 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s; /* 设置过渡属性，包括宽度、高度和背景颜色，持续时间为2秒 */
}

/* 当鼠标悬停在 div 上时，改变其样式 */
div:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

解释说明：

transition 属性用于定义元素在不同状态之间的平滑过渡效果。
在上面的示例中，我们设置了 width、height 和 background-color 这三个属性的过渡效果，每个属性的过渡时间都设置为2秒。
当用户将鼠标悬停在 div 元素上时，div 的宽度、高度和背景颜色会逐渐从初始值过渡到新的值，而不是立即发生变化。

上一篇：css 图片翻转

下一篇：css background:背景图片拉伸铺满