如何在CSS中实现宽高变化过渡_Width height与transition结合实践-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-23 21:13:36

原创

890人浏览过

通过transition属性实现宽高平滑过渡，需配合width、height设置起止值与动画参数，利用:hover、:focus或JavaScript触发状态变化，如按钮悬停放大效果，注意避免使用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本身不会主动触发变化，需要通过状态改变来驱动尺寸更新。最常见的方法是利用伪类或JavaScript。

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

实际示例：按钮悬停放大

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

立即学习“前端免费学习笔记（深入）”；

有道智云AI开放平台

116

查看详情

.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;
}

登录后复制

这里使用了cubic-bezier来自定义缓动曲线，使动画更生动。注意保持line-height与height同步更新，避免文字偏移。