html - 只有 SCSS 的打字机效果(宽度动画)

Question

我正在使用 SCSS 开发打字机效果，here is the Codepen .为了达到效果，我为 width 设置了动画。 , 至 0至 30rem .我正在尝试实现一种更加模块化的解决方法，无论内容的宽度如何，它都可以在任何需要的宽度下工作。

目前，我只是想用一种 @mixin得到width (或 max-width )内容的值(value)，但这不是我要找的。

我也试过 flex容器和flex-grow内容，但我没有运气。

如何实现？我也在寻找一种方法来改进和重构我的代码，因此我愿意接受您给我的任何建议。

这是代码片段(这是 CSS，不是我笔下显示的 SCSS):

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
body {
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  font-family: 'Anonymous Pro', monospace; }
  body .typewriter-text {
    margin: 4rem auto 0 auto;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.75);
    width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.75); }

.line-1 {
  animation: blink 1s step-end 7 backwards, type 2s 2s steps(30, end) forwards, blink 1s 3.6s step-end 7, remove-blink 1s 6.3s step-end forwards; }

.line-2 {
  animation: remove-blink 0s 0s step-end forwards, type 3s 7.5s steps(40, end) forwards, remove-blink 0s 10.5s forwards; }

.line-3 {
  animation: remove-blink 0s 0s step-end forwards, type 3s 10.5s steps(40, end) forwards, blink 1s 14s infinite alternate; }

@keyframes type {
  0% {
    width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.75); }
  100% {
    width: 20rem;
    border-right: 1px solid rgba(255, 255, 255, 0.75); } }

@keyframes blink {
  50% {
    border-color: transparent; } }

@keyframes remove-blink {
  to {
    border-color: transparent; } }

<div class="typewritter-wrapper">
  <h1 class="typewriter-text line-1">Lorem Ipsum D</h1>
  <p class="typewriter-text line-2">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit.</p>
  <p class="typewriter-text line-3">Donec vitae est commodo, imperdiet nulla at.</p>
</div>

谢谢!

Answer 1

CSS 没有一种方法可以根据另一个元素计算和调整一个元素，而这是这里需要的。

不过，我们可以做的是使用 transform，其中一个覆盖带有伪元素的文本，然后将文本元素向左移动，将伪元素移至左侧对，显示文本。

缺点是无法计算宽度，内容越宽，内容越快，越窄越慢，解决这个问题的唯一合理方法是计算服务器端的文本长度，并使用以下方法设置步长/持续时间内联样式，或使用脚本的客户端。

请注意，在下面的示例中，我删除了“闪烁”效果以简化代码。

堆栈片段

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
body {
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  text-align: center;
  font-family: 'Anonymous Pro', monospace;
}

.typewriter-wrapper {
  overflow: hidden;
  display: inline-block;
}

.typewriter-text {
  display: none;
  position: relative;
  margin: 2rem auto;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  transform: translateX(50%);
  padding: 0 2px;
}

.typewriter-text::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  right: 0;
  bottom: 0;
  background: #1a1a1a;
  border-left: 1px solid white;
}

.line-1 {
  animation: type 2s 0.5s steps(30, end) forwards;
}

.line-1::after {
  animation: type2 2s 0.5s steps(30, end) forwards;
}

@keyframes type {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes type2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 1px));
  }
}

<div class="typewriter-wrapper">
  <h1 class="typewriter-text line-1">Lorem Ipsum Dolor</h1>
</div>
<hr>
<div class="typewriter-wrapper">
  <p class="typewriter-text line-1">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</p>
</div>

---

已更新。

我也是found a solution at CSS Tricks使用宽度，巧妙地与 Flexbox 结合，尽管短/长文本输入更快/更慢问题也适用于此。

堆栈片段

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
body {
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  text-align: center;
  font-family: 'Anonymous Pro', monospace;
}

.typewriter-wrapper {
  display: flex;
  justify-content: center;
}

.typewriter-text {
  position: relative;
  margin: 2rem auto;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 1px solid white;
}

.line-1 {
  animation: type 3s 0.5s steps(30, end) forwards,
  blink .5s step-end infinite;
}

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

@keyframes blink {
  0%,
  100% {
    border-color: transparent
  }
  50% {
    border-color: white
  }
}

<div class="typewriter-wrapper">
  <div>
    <h1 class="typewriter-text line-1">Lorem Ipsum Dolor</h1>
  </div>
</div>
<hr>
<div class="typewriter-wrapper">
  <div>
    <p class="typewriter-text line-1">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</p>
  </div>
</div>