添加 CSS 动画，使占位符文本看起来就像正在键入一样

Question

如何添加 CSS 动画，使输入字段的占位符文本看起来就像正在键入一样？ 我这样做了，但没有显示：

.typewriter::placeholder {
  overflow: hidden;
  white-space: nowrap; 
  margin: 0 auto;
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

用于向输入字段的 placeholder 属性添加动画的 CSS 代码。

Answer 1

您无法在 CSS 中对

placeholder

进行动画处理。 更好的方法是在标签中使用额外的

<span>

元素来执行此操作。

参见这个例子：

.typewriter_label,
.typewriter_label input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 10rem;
}

.typewriter_label span {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
  z-index: 1;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

<label class="typewriter_label" for="inp">
  <span> My Placeholder </span>

  <input class="typewriter" type="text" name="inp" id="inp" />
</label>