如何让 CSS 打字机效果工作？答案

【问题标题】：How to get CSS Typewriter effect working?如何让 CSS 打字机效果工作？
【发布时间】：2020-08-25 16:14:44
【问题描述】：

我正在尝试为网页上的某些文本添加打字机效果，但是它没有按预期工作。由于这个问题是关于动画的，我在下面给出了小视频（只有 5-6 秒）链接。

如何使光标停止超出其需要的位置？ See Here
这个动画在我打开网站时就开始了，但是这个部分在网页的中间，所以用户看不到那个动画。See here
在移动设备上查看时，它不会自行调整。那么我应该怎么做才能让它在小屏幕上自动变小（将整个文本保持在同一行）。 See here

.pcb-text p {
  font-size: 60px;
  animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
  / width: 28ch;
}

@keyframes type-writer-effect {
  0% {
    text-align: center;
    width: 0ch;
  }
  100% {
    width: 28ch;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

【问题讨论】：

这里有多个问题需要时间来解决。要获得更清晰的动画，您可以查看different pen，要使其在查看时播放，您需要自定义 JS 或 WowJs 之类的库，这很方便，而对于响应性，您只需使用媒体查询或大小单位，如 em / rem 等。抱歉，没有空闲时间完全完成您的任务。
@ChrisW.谢谢你的帮助
关于#2，参见：Activate CSS3 animation when the content scrolls into view。
很棒的教程：youtu.be/4Mxv8KcAdLE

标签： html css web frontend

【解决方案1】：

为了避免您的问题，您需要为父 .pcb-text 设置 flex 规则，并在关键帧中将其更改为过渡 - from{} 和 to{}。

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcb-text p {
  font-size: 60px;
  animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}



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

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }

<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

这就是JS的效果

<!DOCTYPE html>
<html>
<body>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Physics, Chemistry, Biology.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

要在元素可见时调用效果，您可以使用 jQuery 执行类似的操作：

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        typeWriter()
        has_fired = true; // use this if only want fired once
    }
});

如果您想使用 CSS 动画，可以查看：https://css-tricks.com/snippets/css/typewriter-effect/

你可以像 JS 动画一样启动 CSS 动画

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        $("#yourElement").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

【讨论】：

【解决方案3】：

首先，如果您希望动画在用户滚动到它所在的部分时开始，您将需要一个 java 脚本（您也可以使用 jQuery）代码，如 this link 中的代码.

其次，为了在不同的屏幕上有不同的字体大小，我更喜欢使用 Bootstrap，但如果你不熟悉 Bootstrap，你可以使用 CSS 媒体查询，如下所示：

@media only screen and (max-width: 600px) {
.pcb-text p {
    text-align: center;
    font-size: 20px;
    animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    border-right: .12em solid orange;
  }
}

@media only screen and (min-width: 601px) {
.pcb-text p {
     text-align: center;
     font-size: 60px;
     animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
     overflow: hidden;
     white-space: nowrap;
     margin: 0 auto;
     border-right: .12em solid orange;
     width: 28ch;
   }
}

这两个媒体查询是针对两种屏幕尺寸（宽度为 600 像素或更小的屏幕和 601 像素或更大的屏幕）编写的。您可以根据自己的需要扩展它们。

最后对于光标我不得不说，因为你事先不知道 p 标签的宽度，所以将它放在 div 中并将 p 标签的宽度设置为 100% 是个好主意。在这种情况下，光标不会移动到末尾，因为 p 标签默认获得其容器标签宽度的 100%。但是要找到 p 标签的确切宽度（即它的长度），您最好使用如下 java-script 代码：

<script>
    var text = document.getElementById("myParagraph").innerText;
    var textLength = text.trim().length;
    //Then set the length of your div which holds the p tag equal to textLength considering the number of pixel each character takes in your chosen font-size
</script>

【讨论】：

Sergey 的建议是正确的，但如果您不熟悉 flex 或 bootstrap，您仍然可以使用 CSS 百分比和媒体查询来达到您想要的效果