css transition属性的定义和用法

作者：热血震荡发布日期:2025-06-15 浏览:53

/* CSS transition 属性用于控制元素从一种样式变换为另一种样式的速度。可以通过设置 transition 属性来改变元素在不同状态之间的过渡效果。 */

/* 示例代码： */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s; /* 设置宽度、高度和背景颜色的过渡时间为2秒 */
}

/* 当鼠标悬停在 div 上时，触发样式变化 */
div:hover {
  width: 300px;
  height: 300px;
  background-color: blue;
}

解释说明：

transition 属性定义了当 CSS 属性值发生变化时，如何进行过渡。
在上面的例子中，transition: width 2s, height 2s, background-color 2s; 表示宽度、高度和背景颜色的变化将在2秒内完成。
当鼠标悬停在 div 元素上时，div:hover 选择器会触发样式变化，元素的宽度、高度和背景颜色会逐渐过渡到新的值。

上一篇：css :before

下一篇：css文本超出显示省略号