Question

我正在使用SCSS here is the Codepen开发打字机效果。为了达到这个效果，我将width，0设为30rem。我正在尝试实现更加模块化的解决方法，无论内容的宽度如何，都可以以任何所需的宽度工作。

目前，我只想用一种@mixin来获取内容的width（或max-width）值，但这不是我想要的对

我还尝试使用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，其中一个用覆盖文本，然后将文本元素移到左边，将伪移动到右边，显示文本。

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

注意，在下面的示例中，我删除了＆＃34;闪烁＆＃34;效果简化代码。

Stack snippet

＆＃13;

@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));
  }
}

＆＃13;

<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>

＆＃13;

更新

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

Stack snippet

＆＃13;

@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
  }
}

＆＃13;

<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>

＆＃13;

打字机效果仅限SCSS（宽度动画）

1 个答案: