如何让线条触碰到容器角落？keyframes国旗变体布局问题求助

问题根源 #

当前代码里，线条靠height:100%实现扩展，但旋转后height的参考系是原垂直方向，不是旋转后的方向。对斜向线条（比如45°）来说，容器对角线长度比边长长，height:100%够不到角落；容器宽高不等时，这个问题会更突出。

修正方案 #

通过以下调整，让所有线条不管旋转角度、容器宽高，都能精准触达边缘：

• 统一线条定位与变换：把translate(-50%, -50%)移到基础.line类里，减少重复代码，确保所有线条以容器中心为原点。
• 按对角线长度设置线条基准：线条的基准长度设为容器对角线，保证旋转后能覆盖到最远的角落。
• 用缩放动画替代高度动画：通过scaleY实现从中心向外扩展的效果，配合transform-origin: center让两端同步延伸。

修正后完整代码 #

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

.container {
  /* 可随意调整宽高，线条仍能触达边缘 */
  height: 800px;
  width: 600px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* 定义容器宽高变量，用于计算对角线 */
  --container-width: 600px;
  --container-height: 800px;
}

.red-dot {
  height: 150px;
  width: 150px;
  background-color: red;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  width: 1px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 以容器中心为原点 */
  transform: translate(-50%, -50%);
  transform-origin: center;
  /* 基准长度设为容器对角线，确保覆盖所有方向 */
  height: calc(sqrt(var(--container-width) * var(--container-width) + var(--container-height) * var(--container-height)));
  /* 初始状态：缩放为0 */
  transform: translate(-50%, -50%) rotate(var(--rotate)) scaleY(0);
  animation: 1s expand ease-out forwards;
}

/* 用CSS变量定义各线条旋转角度，简化代码 */
.line-1 { --rotate: 0deg; }
.line-2 { --rotate: 45deg; }
.line-3 { --rotate: 90deg; }
.line-4 { --rotate: 135deg; }
.line-5 { --rotate: 180deg; }
.line-6 { --rotate: 225deg; }
.line-7 { --rotate: 270deg; }
.line-8 { --rotate: 315deg; }

@keyframes expand {
  100% {
    /* 动画结束时缩放至1，完全展开 */
    transform: translate(-50%, -50%) rotate(var(--rotate)) scaleY(1);
  }
}

关键修改说明 #

• CSS变量的使用：通过--container-width和--container-height统一管理容器尺寸，后续调整时只需改这两个变量，不用改多处代码。
• 对角线长度计算：用CSS math()函数（需浏览器支持）计算容器对角线，确保线条长度够覆盖所有方向的边缘。要兼容旧浏览器的话，直接替换成对角线的近似值就行（比如800x600容器的对角线约为1000px）。
• 缩放动画：比起修改height，scaleY动画更高效，还能保证旋转后的线条从中心向两端均匀延伸，完美触达容器边缘。

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