纯html+css实现打字效果

这里给出纯HTML+CSS实现打字效果的完整攻略。

步骤1：创建HTML结构

首先我们需要在HTML中创建打字效果所需的结构，一般情况下可以使用<div>，<span>或<p>等标签来实现。例如：

<div class="typing">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</div>

上面的代码创建了一个<div>元素，并包含了5个<span>元素，每个<span>元素中包含一个字母，所以这个结构就是一个包含“Hello”这个单词的结构。

步骤2：写CSS样式

接下来，我们需要为这个结构添加样式，让它实现打字效果。首先，我们需要设置每个字母的样式，如下：

span {
  display: inline-block;
  opacity: 0;
  animation: typing 1s ease-in-out forwards;
}

上面的样式代码设置了每个字母的display属性为inline-block，以便字母在同一行显示。opacity属性设置为0，以便字母开始时不可见。另外，我们使用了CSS3动画typing，持续1秒，缓动效果是ease-in-out，并保持动画结束时的状态（forwards）。接下来我们还需要定义typing动画：

@keyframes typing {
  to {
    opacity: 1;
  }
}

除了动画本身，我们还需要设置@keyframes规则。这里我们使用了to关键字定义一个动画，当动画结束时，元素的opacity属性设置为1，以显示出元素。

现在，这个样式已经应用到了每个字母上，但这样，在页面加载时，所有字母都会立即显示，而我们需要一种逐字逐个地显示它们的方法。所以，我们需要等待前一个字母出现之后再显示下一个字母。这里可以使用animation-delay属性来实现。根据这种方式，每个字母的延迟时间都可以等于之前字母的延迟时间与动画持续时间之和。

.typing span:nth-child(1) {
  animation-delay: 0s;
}

.typing span:nth-child(2) {
  animation-delay: 1s;
}

.typing span:nth-child(3) {
  animation-delay: 2s;
}

.typing span:nth-child(4) {
  animation-delay: 3s;
}

.typing span:nth-child(5) {
  animation-delay: 4s;
}

上面的代码将每个<span>元素的animation-delay属性设置为前一个字母的延迟时间与动画持续时间之和。

示例1：实现一个逐字逐句显示的效果

我们可以在.typing元素中嵌套多个<p>元素，每个<p>元素表示一个完整的句子。我们可以通过在每个<p>元素中添加各自不同的data-text属性来控制它们的显示内容。并通过JS实现对不同<p>元素中的data-text属性的循环遍历，使字母逐字逐句地逐个显示出来。

HTML代码如下：

<div class="typing">
  <p data-text="Hello world!"></p>
  <p data-text="This is a test."></p>
  <p data-text="Can you see me?"></p>
</div>

CSS样式可以和上面的例子一样，这里不再给出。JS代码如下：

const elements = document.querySelectorAll('.typing p');
let index = 0;

function typingEffect() {
  let currentEl = elements[index];
  let text = currentEl.dataset.text;
  let currentText = '';

  let typing = setInterval(() => {
    currentText += text[currentText.length];
    currentEl.textContent = currentText;

    if (currentText.length === text.length) {
      clearInterval(typing);
      index++;

      if (index >= elements.length) {
        index = 0;
      }

      setTimeout(() => {
        currentEl.textContent = '';
        typingEffect();
      }, 1000);
    }
  }, 100);
}

typingEffect();

上面的JS代码定义了一个typingEffect函数，在函数内部定义一个currentEl变量用于指向当前正在显示的<p>元素，然后使用setInterval函数实现字母逐个显示出来的效果。在每个<p>元素的字母都显示完毕后，删除之前的文字，使用setTimeout函数延迟一秒钟，再次调用typingEffect函数来显示下一个<p>元素中的字母。

示例2：实现打字机效果

在示例1中，我们实现了逐字逐句逐个显示的效果，接下来我们将为了增加打字机的效果，逐步添加文字的效果。同样的，我们可以在.typing元素中嵌套<p>元素，并使用data-text属性来指定要逐步添加的文本。

HTML代码如下：

<div class="typing">
  <p data-text="Hello world! I'm typing...">
</div>

我们需要使用JS实现逐字逐步添加的效果，并使用CSS实现光标闪烁的效果。下面是CSS样式和JS代码：

.typing span.cursor {
  display: inline-block;
  margin-left: 5px;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

const elements = document.querySelectorAll('.typing p');
let index = 0;

function typingEffect() {
  let currentEl = elements[index];
  let text = currentEl.dataset.text;
  let currentText = '';
  let typing = setInterval(() => {
    currentText += text[currentText.length];
    currentEl.textContent = currentText;

    if (currentText.length === text.length - 1) {
      clearInterval(typing);
      index++;

      if (index >= elements.length) {
        index = 0;
      }

      setTimeout(() => {
        currentEl.innerHTML = currentText + '<span class="cursor">|</span>';
        typingEffect();
      }, 2000);
    }
  }, 100);
}

typingEffect();

JS代码中与示例1相似，但添加了一个显示光标的代码。当一行文字被输出后，光标的显示效果会闪烁。当全部文字被输出后，我们将光标显示在文本后，等待2秒钟后再进行下一行文本的输出。

结束了，上面是纯HTML+CSS实现打字效果的详细攻略，希望能对你有所帮助。