Question

我正在尝试在动画文本的末尾停止基于边框的光标，而不是转到窗口的边缘。我已经尝试设置容器的宽度并调整文本宽度，但这将用于未确定宽度的变量。

<div class="type">
    <h1>We have some basic text here</h1>
</div>


body { background: #333; font-family: "Lato"; color: #fff; }

div.type {
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.type h1 {
  overflow: hidden;
  border-right: .05em solid #aaa;
  width: auto;
  text-align: center;
  margin: 0 auto;
  animation:
    type 5s steps(100, end)
}

@keyframes type {
  from { width: 0; }
  to { width: 100%; }
}

Code Pen

Answer 1

使用max-width而不是width。

.type h1 {
  display: inline-block; <-- added
  overflow: hidden;
  border-right: .05em solid #aaa;
  max-width: auto;
  text-align: center;
  margin: 0 auto;
  animation:
    type 5s steps(100, end)
}

@keyframes type {
  from { max-width: 0; }
  to { max-width: 100%; }
}

Code Pen

CSS3动画文字。停止内容结束

1 个答案: