下面是对于“JavaScript文本特效实例小结【3个示例】”这篇文章的详细攻略。

JavaScript文本特效实例小结【3个示例】

1. 第一个示例

文章中第一个示例是实现一个文本逐字递增效果，代码如下：

let speed = 80; // 每个字停顿的时间(ms)
let text = 'Hello World!'; // 需要展示的文本
let container = document.querySelector('#text-container'); // 展示文本的容器
let index = 0; // 当前展示到哪个字的索引

function showText() {
  container.textContent += text[index];

  index++;

  if (index < text.length) {
    setTimeout(showText, speed);
  }
}

showText();

这个示例使用了递归的方式，不停地往容器中添加文本，达到逐字递增的显示效果。

2. 第二个示例

文章中第二个示例是实现一个文本下划线跳动效果，代码如下：

let container = document.querySelector('#text-container'); // 展示文本的容器
let text = 'Hello World!'; // 需要展示的文本
let index = 0; // 当前展示到哪个字的索引
let speed = 300; // 下划线跳动的速度(ms)
let underlineWidth = 4; // 下划线的宽度(px)

function showText() {
  container.textContent += text[index];

  index++;

  if (index <= text.length) {
    setTimeout(showText, speed);
  } else {
    let lastChild = container.lastChild;

    let underline = document.createElement('span');
    underline.style.borderBottom = `${underlineWidth}px solid red`;

    container.replaceChild(underline, lastChild);

    setInterval(function () {
      underline.style.opacity = underline.style.opacity === '0' ? '1' : '0';
    }, 500);
  }
}

showText();

这个示例在逐字递增的基础上，通过添加一个下划线元素以及opacity属性的变化，实现了一种下划线跳动的效果。

3. 第三个示例

文章中第三个示例是实现一个文本模糊消失再出现效果，代码如下：

let container = document.querySelector('#text-container'); // 展示文本的容器
let text = 'Hello World!'; // 需要展示的文本

function fadeOut() {
  container.style.opacity -= 0.01;

  if (container.style.opacity > 0) {
    requestAnimationFrame(fadeOut);
  } else {
    container.textContent = '';
    fadeIn();
  }
}

function fadeIn() {
  container.style.opacity = +container.style.opacity + 0.01;

  if (container.style.opacity < 1) {
    requestAnimationFrame(fadeIn);
  }
}

fadeIn();
setInterval(fadeOut, 3000);

这个示例使用了requestAnimationFrame方法来实现文本的淡出和淡入效果。在fadeIn函数中，通过不停地增加元素的opacity，实现了文本的淡入效果。在fadeOut函数中，通过不停地减少元素的opacity，实现了文本的淡出效果。当元素淡出完毕后，我们清空容器中的文本，并调用fadeIn函数，实现文本的再次淡入。

以上就是对于“JavaScript文本特效实例小结【3个示例】”这篇文章的详细攻略，希望能够对您有所帮助。