如何实现松开左键后红色矩形保持在容器顶部？已尝试animation-fill-mode无效

是否需要JavaScript？ #

是，必须用JavaScript实现。CSS的:active伪类仅在鼠标左键按住元素时生效，松开后伪类状态消失，元素会恢复初始样式——哪怕使用animation-fill-mode: forwards也没用，因为:active状态一消失，动画就不再作用于元素了。要实现点击后持久保持顶部状态，必须用JS来切换元素的类。

修正后的实现方案 #

1. 优化CSS代码 #

先修复原动画的问题：原@keyframes里重复定义的from/to会被覆盖，导致只有最后一组样式生效。我们改用transition实现平滑过渡，同时新增.active类定义元素停在顶部的最终样式：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 避免边框影响尺寸计算，防止布局溢出 */
}

body {
  background-color: rgb(21,21,21);
  display: flex;
  justify-content: center;
  padding-top: 50px; /* 让容器不贴顶部，方便查看效果 */
}

.container {
  height: 425px;
  width: 300px;
  border: 2px solid rgb(43, 238, 252);
  border-radius: 25px;
  display: flex;
  align-items: end;
  overflow: hidden; /* 防止元素超出容器范围 */
}

.textbox {
  width: 100%; /* 适配容器宽度，避免边框导致横向溢出 */
  height: 150px;
  border: 2px solid rgb(43, 238, 252);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: red;
  transition: all 2s ease; /* 2秒内平滑过渡所有属性变化 */
}

/* 点击后保持的顶部状态样式 */
.textbox.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  margin-bottom: calc(425px - 150px); /* 精确计算距离底部的距离，确保对齐顶部 */
}

2. 添加JavaScript代码 #

给红色矩形绑定点击事件，通过切换.active类实现状态持久化——如果只需要点击一次就固定在顶部，把toggle换成add即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css"> <!-- 替换成你的CSS文件路径 -->
</head>
<body>
  <div class="container">
    <div class="textbox"></div>
  </div>

  <script>
    const textbox = document.querySelector('.textbox');
    textbox.addEventListener('click', () => {
      textbox.classList.toggle('active');
      // 若只需固定不恢复状态，替换为：textbox.classList.add('active');
    });
  </script>
</body>
</html>

额外建议 #

• 用calc()计算位置比百分比更可靠，能避免父元素尺寸变化导致的位置偏差
• box-sizing: border-box是前端布局的常用基础技巧，让元素的尺寸计算更直观（边框和内边距包含在宽高中）
• 简单的状态切换用transition比animation更简洁，代码更易于维护

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