使用 CSS 创建文字效果（以及一个小小的 contenteditable 技巧）

Mandy Michael 一直在 使用 CSS 的强大功能创建一些令人难以置信的文字效果。 她用尽了所有技巧：渐变、转换、伪元素、阴影和裁剪路径，仅举几例。 它们都是真正的 网页文字。 通常使用自定义字体，但不使用图像、画布、SVG 或类似的东西。

看看这个漂亮的效果

查看 CodePen 上 Mandy Michael (@mandymichael) 的 纯 CSS 3D 折纸文字效果。

它是真正的文字，这意味着它可以访问、搜索，当然也可以选择

演示是使用contenteditable 属性的绝佳场所，该属性将任何文本元素转换为类似于textarea 或input 的元素，因此任何人都可以点击它并更改文字。

<h1 contenteditable>Cool Title</h1>

但由于 Mandy 的许多演示都使用伪元素，而伪元素中的文字需要与元素本身的文字匹配，因此文字可能会不同步

不要害怕！ 只需几行 JavaScript 就可以使这些文字保持同步

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

input 事件非常方便，因为它涵盖了元素值（甚至contenteditable 元素）的任何更改。 它的浏览器支持度相当不错，只是 IE 除外（Edge 支持良好）。 如果你确实需要在 IE 中使用它，你仍然可以通过组合keyup、paste 和blur 等事件来实现。 但对于这样的小事，你可能不需要这样做。

现在一切都很好

但在我们离开之前，让我们再欣赏一下 Mandy 的作品

查看 CodePen 上 Mandy Michael (@mandymichael) 的 线条和分层 CSS 文字效果。

查看 CodePen 上 Mandy Michael (@mandymichael) 的 条纹彩虹文字效果。

查看 CodePen 上 Mandy Michael (@mandymichael) 的 单个元素，多色 3D 文字效果。

查看 CodePen 上 Mandy Michael (@mandymichael) 的 分裂断裂文字。