css过渡动画

作者：月下孤魂发布日期:2025-10-23 浏览:93

/* 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;
  transform: rotate(360deg); /* 旋转元素360度 */
}

解释说明：

transition 属性用于定义元素在不同状态之间的过渡效果。这里我们设置了 all 属性，表示所有可变的样式属性都会应用过渡效果，持续时间为 0.5s，并且使用了 ease 函数来控制过渡的速度曲线。
当鼠标悬停在 .box 元素上时，它的宽度、高度、背景颜色和旋转角度都会发生变化，并且这些变化会在 0.5s 内平滑过渡，而不是瞬间完成。

上一篇：css 粘性定位

下一篇：css 字体斜体