css 过渡效果

作者：尛丸子的天真▍我学不会゜发布日期:2025-09-15 浏览:44

/* 示例代码：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 属性用于定义 CSS 属性的变化应该以动画形式呈现。在这个例子中，我们使用 transition: all 0.5s ease; 来指定所有的 CSS 属性在 0.5 秒内以平滑的方式变化。
.box:hover 是当鼠标悬停在 .box 元素上时触发的样式。当鼠标悬停时，盒子的宽度、高度和背景颜色会逐渐变化，而不是立即改变。

上一篇：css 加下划线

下一篇：css中划线