html - 打字效果-css写出完整的文字

Question

我正在尝试像打字一样写文本，但打字效果并没有完全写出长文本，而且文本也没有移动到第二行以完成文本书写。

欢迎使用任何 css 方法(避免使用 js 或 jquery)。

    /* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
    
    /* Global */
    html{
      min-height: 100%;
      overflow: hidden;
    }
    body{
      height: calc(100vh - 8em);
      padding: 4em;
      color: rgba(255,255,255,.75);
      font-family: 'Lato', sans-serif; 
      background-color: rgb(25,25,25);  
    }
    .line-1{
        position: relative;
        top: 50%;  
        width: 100%;
        border-right: 2px solid rgba(255,255,255,.75);
        font-size: 180%;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        transform: translateY(-50%);    
    }
    
    /* Animation */
    .anim-typewriter{
      animation: typewriter 4s steps(44) 1s 1 normal both,
                 blinkTextCursor 500ms steps(44) infinite normal;
    }
    @keyframes typewriter{
      from{width: 0;}
      to{width: 100%;}
    }
    @keyframes blinkTextCursor{
      from{border-right-color: rgba(255,255,255,.75);}
      to{border-right-color: transparent;}
    }

    <p class="line-1 anim-typewriter">Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps()</p>

Answer 1

您可以使用此 css 子语句来分解您的段落并继续到下一行..

.css-typing p {
  margin-left: -20px;
  color: black;
  text-align: center;
  border-right: .15em solid orange;
  font-family: "monospace";
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.css-typing p:nth-child(1) {
  width: 400px;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 400px;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 400;
  opacity: 0;
  -webkit-animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
  animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(4) {
  width: 400px;
  opacity: 0;
  -webkit-animation: type4 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(5) {
  width: 400px;
  opacity: 0;
  -webkit-animation: type5 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(6) {
  width: 400px;
  opacity: 0;
  -webkit-animation: type6 2s steps(40, end);
  animation: type4 2s steps(40, end);
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

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

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

<div class="css-typing">
  <p>
    typewriter style
  </p>
  <p>
    Animation typewriter
  </p>
  <p>
    style using css
  </p>
  <p>
    steps() Animationy
  </p>
  <p>
    typewriter style using
  </p>
  <p>
    css steps().
  </p>
</div>