3 分钟内揭秘 CSS 故障文本

想在下一个项目中添加有趣的文字动画吗？在这篇文章中，我们将制作以下文字显示动画。

为此，我们将利用 CSS 变量范围的强大功能💪

对于那些TL;DR阵营的人来说，向下滚动查看演示和代码👍

免责声明

HTML仅使用&即可实现此效果CSS。我使用了一点JavaScript来增强标记。这样每次刷新时都会有所不同。不过，我也会分享一个非 JavaScript 版本 👍

加价

我们首先需要的是一些标记✅

<p>Glitchy Text Reveal!</p>

JavaScript

这是 JavaScript。

const { Splitting } = window
const RESULTS = Splitting()
// Set of characters we can use to glitch through
const GLITCH_CHARS = '`¡™£¢∞§¶•ªº–≠åß∂ƒ©˙∆˚¬…æ≈ç√∫˜µ≤≥÷/?░▒▓<>/'.split('')
// Loop through our Splitting results and apply CSS variables.
// The results contain an Array of spans that are the characters.
for (let r = 0; r < RESULTS.length; r++) {
  const CHARS = RESULTS[r].chars
  for (let c = 0; c < CHARS.length; c++) {
    // We are going to inline 10 CSS variables
    for (let g = 0; g < 10; g++) {
      CHARS[c].style.setProperty(
        `--char-${g}`,
        `"${GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]}"`
      )
    }
  }
}

我们正在使用出色的Splitting.js将文本切分成多个跨度。

这样我们就能够选择单个字符了😎 得到结果后，我们循环遍历字符元素并应用内联CSS变量。这些变量决定了应该显示哪些故障字符。

字符的最终标记可能看起来像这样。

<span
  class="char"  
  data-char="G"
  style="
    --char-0:'˙';
    --char-1:'§';
    --char-2:'º';
    --char-3:'∞';
    --char-4:'˙';
    --char-5:'▒';
    --char-6:'˙';
    --char-7:'µ';
    --char-8:'£';
    --char-9:'<';">
    l
</span>

CSS

首先，我们需要设置一个伪元素来复制我们的角色。然后，我们隐藏原始角色。

[data-char] {
  color: transparent;
  position: relative;
}
[data-char]:after {
  --txt: attr(data-char);
  animation-duration: 0.2s;
  animation-delay: 0.5s;
  animation-timing-function: steps(1);
  animation-fill-mode: backwards;
  content: var(--txt);
  color: var(--color);
  position: absolute;
  left: 0;
  top: 0;
}

注意内容是如何用 CSS 变量填充的👍

诀窍就在这里。我们将利用 CSS 变量作用域来创建“一个动画适用于所有情况”的场景。我们定义一组keyframes用于切换content属性的变量。它如何知道要切换到哪个属性呢？它会引用我们之前设置的内联变量 😉

@keyframes glitch-switch {
  0% { content: var(--char-0); }
  10% { content: var(--char-1); }
  20% { content: var(--char-2); }
  30% { content: var(--char-3); }
  40% { content: var(--char-4); }
  50% { content: var(--char-5); }
  60% { content: var(--char-6); }
  70% { content: var(--char-7); }
  80% { content: var(--char-8); }
  90% { content: var(--char-9); }
  100% { content: var(--char-0); }
}

就是这样！

虽然不是很有意思，对吧？我们来试试animation-iteration-count改变一下效果。用内联 CSS 变量定义一个随机迭代次数怎么样？

我们可以像这样内联一个计数变量；

CHARS[c].style.setProperty('--count', Math.random() * 5 + 1)

然后将其应用于我们的 CSS；

animation-iteration-count: var(--count);

给我们这样的东西！🎉

无障碍设施

值得一提的是，如何让这个功能更容易上手。最简单的解决方案是复制文本并应用aria-hidden到我们的故障文本上👍

就是这样！

3分钟揭秘 CSS 文本故障！请务必查看演示，了解不同的时间行为。

一如既往，如果您有任何问题或建议，请随时留言或发推文给我🐦！也别忘了在社交媒体上与我互动！🤓

这是纯 CSS 版本 😉 你以为我忘了？下次再见 👋

文章来源：https://dev.to/jh3y/css-glitchy-text-reveal-in-3-minutes-24pb