如何在CSS中实现宽高变化过渡_Width height与transition结合实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现宽高变化过渡_Width height与transition结合实践

2025-11-23

浏览次数：次

返回列表

通过transition属性实现宽高平滑过渡，需配合width、height设置起止值与动画参数，利用:hover、:focus或J*aScript触发状态变化，如按钮悬停放大效果，注意避免使用auto、优化性能并考虑transform替代方案。

如何在css中实现宽高变化过渡_width height与transition结合实践

在CSS中实现宽高变化的平滑过渡，核心是transition属性与width、height的配合使用。只要设置好过渡属性和触发条件，元素的尺寸变化就能变得自然流畅，常用于按钮悬停、菜单展开等交互场景。

设置transition控制宽高过渡

要让width和height的变化产生动画效果，必须通过transition指定哪些属性需要过渡，以及过渡的时间和缓动方式。

给元素设置transition: width 0.3s ease, height 0.3s ease;，可分别控制宽高的过渡行为
transition: all 0.3s;也能生效，但不够精确>
常见属性值包括时长（如0.3s）、缓动函数（如ease-in-out）和延迟（可选）

触发宽高变化的常用方式

transition本身不会主动触发变化，需要通过状态改变来驱动尺寸更新。最常见的方法是利用伪类或J*aScript。

使用:hover实现鼠标悬停时扩大元素
通过:focus在输入框获得焦点时调整大小
结合class切换，用J*aScript动态添加或移除类名来触发变化

实际示例：按钮悬停放大

下面是一个简单的按钮，鼠标移入时宽度从100px过渡到140px，高度从40px变为50px。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

.button {
  width: 100px;
  height: 40px;
  background: #007bff;
  color: white;
  text-align: center;
  line-height: 40px;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.3s ease;
}

.button:hover {
  width: 140px;
  height: 50px;
}