logo
Published on

能否只使用 CSS 来实现部分字符的样式？

Authors
  • Name
    Twitter

仅供历史记录使用！

几年前，我为自己的项目发现了一种解决方案，名为 Gradext（纯 JavaScript 和纯 CSS，无需任何依赖）。

技术上，你可以创建一个如下所示的元素：

<span>A</span>

如果你想在文本上实现渐变效果，需要创建多个层，每一层的颜色都不同，最终形成渐变效果。例如，考虑如下代码为一个包含 <span> 的单词 lorem，它将产生水平渐变效果（查看示例）：

<span data-i="0" style="color: rgb(153, 51, 34);">L</span>
<span data-i="1" style="color: rgb(154, 52, 35);">o</span>
<span data-i="2" style="color: rgb(155, 53, 36);">r</span>
<span data-i="3" style="color: rgb(156, 55, 38);">e</span>
<span data-i="4" style="color: rgb(157, 56, 39);">m</span>

你可以不断地重复这种模式，来实现较长的段落。

图像1：输入图像描述

但是！

假如你想在文本上创建 垂直渐变 效果呢？

那么还有另一种解决方案。接下来将详细描述这一方法。

假设我们仍然使用上述的 <span>，但内容应为整个文本，而不是单个字母。然后我们将同样的 <span> 重复多次（<span> 的数量将决定渐变的质量，更多的 <span> 将产生更好的效果，但会影响性能）。如下代码所示：

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

图像2：输入图像描述

再次，假如！

如果你想让这些渐变效果移动并创建动画呢？

好消息是：也有解决方案。你绝对应该查看 animation: true 或 .hoverable() 方法，它们可以使渐变效果根据光标位置启动！（听起来很酷吧 xD）

图像3：输入图像描述

这就是我们在文本上创建渐变效果（线性或径向）的方式。如果你喜欢这个想法或想了解更多，可以查看提供的链接。

也许这不是最佳的解决方案，也许性能方面也不是最优的，但它确实为创建令人兴奋和愉悦的动画开辟了一些空间，以激励他人找到更好的解决方案。

这种方法允许你在文本上使用渐变样式，甚至支持 IE8！

这里有一个工作中的实时示例，原代码库在 这里的 GitHub 上，开源，准备接受更新 （ :D ）

这是我第一次（是的，5年后，你没听错）在网上提及这个代码库，我对此感到兴奋！

[更新 - 2019年8月：] 由于我来自伊朗，Github 删除了此代码库的 github-pages 演示。不过源码仍然可在 这里 找到。