如何让CSS/HTML边角元素的原生过渡动画更流畅？

我需要实现如下交互效果：

• 悬停红色垂直div时，该元素向上滑动
• 同时蓝色水平div旋转为垂直线并跟随移动
• 两者通过绿色边角分隔，且边角需融入过渡动画

当前实现的问题：通过右侧+底部边框加border-radius创建绿色边角，过渡时将border-bottom和border-radius设为0，会导致边角在过渡完成前变细，侧边残留痕迹，视觉效果不佳，需要平滑过渡的替代方案。

改用伪元素拆分绿色边角的竖线与横线部分，分别控制过渡状态，避免边框粗细变化带来的视觉问题。具体实现思路：

• 绿色边角容器初始定位在目标位置
• 用:before伪元素实现竖线部分，:after伪元素实现横线部分，两者组合成带圆角的L形边角
• hover时隐藏横线伪元素，同时调整竖线伪元素的尺寸、圆角及容器位置，实现平滑过渡

修改后的代码 #

CSS #

:root {
  --container-height: 150px;
  --container-width: 100px;
  --line-thickness: 2px;
  --corner-size: 10px;
}

div.container {
  position: absolute;
  left: 50px;
  top: 50px;
  height: var(--container-height);
  width: var(--container-width);
  border: 1px solid black;
}

div.vertical {
  height: 40px;
  width: var(--line-thickness);
  background-color: red;
  position: relative;
  left: calc(var(--container-width) - var(--line-thickness));
  top: 50px;
  transition: top 0.3s ease, height 0.3s ease;
}

div.vertical:hover {
  height: 30px;
  top: 40px;
}

div.horizontal {
  height: var(--line-thickness);
  width: 40px;
  background-color: blue;
  position: absolute;
  left: 50px;
  top: 100px;
  transition: top 0.3s ease, width 0.3s ease, left 0.3s ease, transform 0.3s ease;
  transform-origin: bottom right;
}

div.vertical:hover ~ div.horizontal {
  width: 30px;
  left: 70px;
  top: 78px;
  transform: rotateZ(-90deg);
}

div.corner {
  position: absolute;
  top: 90px;
  left: calc(var(--container-width) - var(--corner-size) - var(--line-thickness));
  width: var(--corner-size);
  height: var(--corner-size);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease;
}

div.corner:before,
div.corner:after {
  content: '';
  position: absolute;
  background-color: green;
  transition: all 0.3s ease;
}

/* 竖线部分 */
div.corner:before {
  width: var(--line-thickness);
  height: var(--corner-size);
  right: 0;
  border-bottom-right-radius: var(--corner-size);
}

/* 横线部分 */
div.corner:after {
  height: var(--line-thickness);
  width: var(--corner-size);
  bottom: 0;
  border-bottom-right-radius: var(--corner-size);
}

div.vertical:hover ~ div.corner {
  top: 70px;
  width: var(--line-thickness);
  left: calc(var(--container-width) - var(--line-thickness));
}

div.vertical:hover ~ div.corner:after {
  width: 0;
  opacity: 0;
}

div.vertical:hover ~ div.corner:before {
  height: 20px;
  border-bottom-right-radius: 0;
}

HTML #

<div class="container">
  <div class="vertical"></div>
  <div class="corner"></div>
  <div class="horizontal"></div>
</div>

方案说明 #

• 使用CSS变量统一管理线条粗细、边角尺寸，便于后续调整
• 将绿色边角拆分为两个伪元素，避免了border过渡时的粗细变化问题
• 所有过渡效果统一使用0.3s ease，保持动画节奏一致
• hover时通过隐藏横线、调整竖线尺寸和圆角，实现边角到直线的平滑转换

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