css过渡

作者：情丶酸酸甜甜发布日期:2026-06-10 浏览:115

/* CSS过渡示例 */

/* 定义一个元素的初始样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease; /* 设置所有属性的过渡效果，持续时间为0.5秒，缓动函数为ease */
}

/* 当鼠标悬停在元素上时，改变其样式 */
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

解释说明：

transition 属性用于定义 CSS 属性的变化过程。在这个例子中，transition: all 0.5s ease; 表示所有属性的变化将在 0.5 秒内完成，并使用 ease 缓动函数。
当鼠标悬停在 .box 元素上时，它的宽度、高度和背景颜色会发生变化，并且这些变化会以平滑的过渡效果呈现。

上一篇：css 换行

下一篇：css 裁剪