如何修复动画背景块宽高，使数独输入框与按钮正常可用？

核心问题原因 #

绝对定位的.blocks容器占满全屏后，会覆盖在交互元素（输入框、按钮）上方，拦截了所有鼠标/触摸事件，导致元素无法正常交互。

解决方案 #

1. 让背景容器不拦截交互事件 #

给.blocks添加pointer-events: none属性，该属性会让元素忽略所有鼠标事件，事件直接穿透到下方的交互元素：

.blocks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 关键修复属性 */
  list-style: none;
  padding: 0;
  margin: 0;
}

2. 修复页面滚动抖动问题 #

若仅保留li样式时出现滚动抖动，是因为背景块布局未被正确约束。给body添加overflow: hidden，避免背景块超出视口引发滚动：

body {
  margin: 0;
  overflow: hidden; /* 消除滚动抖动 */
}

3. 确保内容层级正常（可选） #

无需给flex-container设置绝对定位，若担心视觉层级问题，可给其添加相对定位和层级值，确保内容在背景上方：

.flex-container {
  position: relative;
  z-index: 1;
}

效果验证 #

修改后，背景动画会正常展示，数独输入框、按钮可正常响应点击、输入等交互操作，同时页面滚动抖动问题也会被解决。

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