css 过渡动画

作者：ares丶技术魂发布日期:2026-06-14 浏览:80

/* 示例代码：使用 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: all 0.5s ease;：这行代码定义了当元素的任何属性发生变化时，变化将在0.5秒内完成，并且变化的速度曲线为“ease”（先慢后快再慢）。
.box:hover：当鼠标悬停在 .box 元素上时，宽度、高度和背景颜色会逐渐过渡到新的值，而不是立即变化。

上一篇：css点击穿透

下一篇：css 定义变量