css 过渡

作者：浪子罢了发布日期:2025-04-12 浏览:92

/* 示例代码：使用 CSS 过渡效果 */

/* 定义一个简单的盒子 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease; /* 添加过渡效果，所有属性在0.5秒内平滑变化 */
}

/* 当鼠标悬停在盒子上时，改变其大小和颜色 */
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

解释说明：

transition 属性用于定义元素的过渡效果。在这个例子中，all 0.5s ease 表示所有属性（如宽度、高度、背景颜色等）将在 0.5 秒内以平滑的方式变化。
当鼠标悬停在 .box 元素上时，hover 伪类会触发样式的变化，此时盒子的宽度、高度和背景颜色都会逐渐过渡到新的值，而不是立即改变。

如果你需要进一步了解或有其他问题，请告诉我！

下一篇：css 边框渐变