css3 transition

作者：﹏〃对不起╮他是为你哭了发布日期:2025-07-06 浏览:20

/* CSS3 Transition 示例代码 */

/* 定义一个简单的过渡效果，当鼠标悬停在元素上时，元素的背景颜色会从默认值逐渐变为红色 */
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease; /* 设置背景颜色的过渡时间为0.5秒，缓动函数为ease */
}

div:hover {
  background-color: red; /* 当鼠标悬停在元素上时，背景颜色变为红色 */
}

/* 解释说明：
- `transition` 属性用于定义 CSS 属性的变化过程。
- `transition: background-color 0.5s ease;` 表示背景颜色的过渡时间是0.5秒，缓动函数为ease（平滑过渡）。
- 当鼠标悬停在元素上时，`hover` 伪类触发，背景颜色从蓝色变为红色，并且这个变化是通过过渡效果实现的。 */

上一篇：css flex 间距

下一篇：css一行省略