css transition

作者：淺墨发布日期:2026-04-15 浏览:45

/* CSS Transition 示例 */

/* 定义一个基础样式 */
.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 是过渡持续时间，表示变化将在0.5秒内完成。
ease 是过渡的时间函数，控制过渡的速度曲线。这里使用默认的 ease，表示先慢后快再慢。

当鼠标悬停在 .box 元素上时，它的宽度、高度和背景颜色会逐渐变化，而不是立即改变。

上一篇：css position

下一篇：css 字体加粗