调整Transition效果起始位置：从左上角改左侧，实现悬停加载进度条

要把过渡效果改成从左侧启动，只需要调整.btn的初始状态和过渡属性就行，核心是让进度条一开始就占满容器高度，只横向展开。修改后的代码如下：

CSS 代码 #

.buttonFrame {
  position: relative;
  width: 55px;
  height: 20px;
  border-radius: 12px;
  border: 2px solid black;
  overflow: hidden;
  top: 30%;
  left: 45%;
  z-index: 100; /* 修正z-index写法，该属性无单位 */
}

.btn {
  border-radius: 12px;
  width: 0%;
  height: 100%; /* 初始高度拉满容器，避免从顶部展开 */
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
  background-position: 0 0;
  transition: width 2s; /* 仅过渡宽度，高度无需变化 */
}

.buttonFrame:hover .btn {
  width: 100%; /* 悬停时仅横向展开至100% */
}

HTML 代码 #

<div class="buttonFrame">
  <div class="btn"></div>
</div>

修改说明 #

1. 修正.buttonFrame中z-index: 100px的错误写法，z-index为无单位数值，改为z-index: 100
2. 将.btn初始height设为100%，让进度条一开始就铺满容器高度，消除从顶部向下展开的效果
3. 简化过渡属性为仅过渡width，因为高度不再变化，动画更精准
4. 悬停状态下只需设置width: 100%，高度保持初始的100%无需重复定义

修改后，鼠标悬停时进度条会从左侧开始，平滑向右填充整个容器，完全符合需求。

内容的提问来源于stack exchange，提问作者Ab_theman23