CSS格式修复：打字动画与搜索栏布局相关问题咨询

API 探路者

2026-9-28

问题1：打字输出文本未在搜索栏上方居中

你的CSS中定义的居中式类名.typewriter-wrapper和HTML中实际使用的类名.typewriter-container不匹配，修改如下：

/* 把原来的 .typewriter-wrapper 替换为以下代码 */
.typewriter-container {
      width: 100%;
      text-align: center;
      margin-bottom: 20px; /* 可自行调整和下方搜索栏的间距 */
}

问题2：打字内容过长时搜索栏随之扩张

给搜索栏设置固定尺寸，不受上层内容影响，修改以下CSS：

.search-form {
      display: flex;
      justify-content: center;
      width: 500px; /* 固定搜索栏整体宽度，可自行调整数值 */
}

.search-input {
      /* 删掉原来的 flex-grow:1 ，改成固定宽度 */
      flex-grow: 0;
      width: 380px; /* 输入框固定宽度，可自行调整，和搜索按钮宽度加起来等于search-form的宽度即可 */
      /* 其余原有属性全部保留 */
}

问题3：光标宽度无法调整、多占空白、无法停在文本末尾

你现在同时写了两套光标逻辑（.typewriter的border-right光标和.cursor伪元素光标）导致冲突，按以下步骤修改：

删掉.typewriter类中的border-right: .15em solid orange;属性和blink-caret动画引用，避免冲突
修复伪元素光标配置：

.cursor::after {
  content:'';
  display:inline-block;
  margin-left: 2px; /* 可调整光标和文本的间距，不需要就设为0 */
  background-color: orange; /* 改成你需要的光标颜色，原来的白色在白色背景下不可见 */
  animation-name: blink-caret; /* 你之前定义的动画名是blink-caret，不是blink，修正引用 */
  animation-duration:0.5s;
  animation-iteration-count: infinite;
  vertical-align: text-bottom; /* 让光标和文本底部对齐，避免错位 */
}
h1.cursor::after {
  height:24px;
  width:13px; /* 直接修改这个数值即可调整光标宽度，按需设置即可 */
}