transition在css中的用法

作者：夜雨行空发布日期:2026-03-05 浏览:100

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

/* 定义一个 div 元素的基本样式 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease; /* 当任何属性变化时，应用 0.5 秒的过渡效果，ease 是默认的缓动函数 */
}

/* 当鼠标悬停在 div 上时，改变其宽度、高度和背景颜色 */
div:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

解释说明：

transition 属性用于定义元素在不同状态之间切换时的过渡效果。
transition: all 0.5s ease; 表示所有属性的变化都会在 0.5 秒内完成，并且使用默认的缓动函数 ease。
当鼠标悬停在 div 元素上时，width、height 和 background-color 属性会发生变化，这些变化会通过 transition 进行平滑过渡。

上一篇：css 强制换行

下一篇：css 文字间距