css transition属性

作者：渚寒烟淡发布日期:2025-05-15 浏览:83

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

/* 定义一个类，初始状态下没有特殊样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease; /* 添加 transition 属性，指定所有属性在 0.5 秒内平滑过渡 */
}

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

解释说明：

transition 属性用于定义元素在不同状态之间切换时的过渡效果。
在上面的示例中，.box 类的元素在初始状态下是一个 100x100 像素的红色方块。
transition: all 0.5s ease; 表示当任何 CSS 属性发生变化时（如宽度、高度或背景颜色），这些变化将在 0.5 秒内以平滑的方式完成。
当用户将鼠标悬停在 .box 元素上时，触发 :hover 状态，元素的宽度、高度和背景颜色会发生变化，并且这些变化会通过 transition 属性实现平滑过渡。

上一篇：csstransform属性

下一篇：css计算宽度calc