只为历史上的记录！

我在5-6年前为自己的工作提出了一个解决方案，这就是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>

你也可以在很长的时间和很长的一段时间内继续这样做。

But!

如果你想在文本上创建垂直渐变效果怎么办？

然后还有另一个可能有用的解决方案。我将详细描述。

再次假设我们的第一个＜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>

再次，但是！

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

嗯，还有另一种解决方案。您应该明确检查animation:true或甚至.hollable（）方法，该方法将导致基于光标位置的渐变开始！（听起来很酷xD）

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

也许这不是最好的选择，也许不是最好的表演方式，但它将为创造令人兴奋和愉快的动画开辟一些空间，以激励其他人寻求更好的解决方案。

它将允许您在文本上使用渐变样式，甚至IE8也支持这种样式！

在这里，您可以找到一个工作的实时演示，原始存储库也在GitHub上，开源，随时可以获得一些更新（：D）

这是我第一次（是的，5年后，你没听错）在互联网上的任何地方提到这个存储库，我对此很兴奋！

〔更新-2019年8月：〕Github删除了该存储库的Github页面演示，因为我来自伊朗！这里只有源代码，但。。。

这可以通过CSS:before选择器和内容属性值来实现。

减半，减半1{浮动：左侧；}减半，减半1{字体系列：arial；字体大小：300px；字号：粗体；宽度：200px；高度：300px；位置：相对；/*帮助保持内容价值*/溢出：隐藏；颜色：#000；}.halved:之前，.halved1:之前{宽度：50%；/*我们想展示多少*/溢出：隐藏；/*隐藏超出我们维度的内容*/内容：'X'；/*半字符*/高度：100%；位置：绝对；颜色：#28507D；}/*对于水平截止*/half-ed1:之前{宽度：100%；高度：55%；}<div class=“half-ed”>X</div><div class=“halved1”>X</div>

>>参见jsFiddle

这是一个仅针对整行文本的CSS解决方案，而不仅仅是字符元素。

第二部分{位置：相对；顶部：2米；高度：2米；文本转换：全宽；}div：之前，div:之后{content:attr（数据内容）；位置：绝对；顶部：0；右：0；底部：0；左：0；}div:之后{颜色：红色；/*单个字符的掩码。通过重复此掩码，所有字符串都将被掩码*/-webkit掩码图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；-webkit掩码重复：repeat-x；/*向右重复面罩*/-webkit掩码大小：1em；/*单个字符的相对宽度*//*非供应商掩码设置*/遮罩图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；掩码重复：repeat-x；掩模尺寸：1em；}/*演示目的*/input[name=“fontSize”]：第一个类型：checked ~ div{字体大小：1em；}input[name=“fontSize”]：第一个类型+input:checked ~ div{字体大小：2em；}input[name=“fontSize”]：第一个类型+input+input：checked ~ div{字体大小：3em；}字体大小：<input type=“radio”name=“fontSize”value=“1em”><input type=“radio”name=“fontSize”value=“2em”checked><input type=“radio”name=“fontSize”value=“3em”><div data content=“仅限CSS的解决方案…”></div><div data content=“在Firefox上试用！”></div>

其想法是为每个字符应用一个水平CSS掩码，隐藏其前半部分[0-0.5em]，并显示后半部分[0.5em-1em]。

掩码的宽度为掩码大小：1em，以匹配字符串中第一个字符的宽度。通过使用掩码repeat:repeat-x，相同的掩码将应用于第二个、第三个字符，依此类推。

我原以为使用单格字体可以解决使用相同宽度字母的问题，但我错了。相反，我通过使用文本转换解决了这个问题：我相信，不幸的是，只有Firefox才支持全宽度。

使用相对单位em允许设计根据字体大小进行放大/缩小。

适用于所有浏览器的Vanilla JavaScript解决方案

如果Firefox不是一个选项，那么使用此脚本进行救援。

它通过为每个字符插入子跨度来工作。在每个span中，从字母的宽度（即span元素的宽度）[0%-50%]和[50%-100%]处放置一个非重复CSS掩码。

这样，我们就不再有使用相同宽度字符的限制。

常量dataElement=document.getElementById（“data”），content=dataElement.textContent，zoom=功能（fontSize）{dataElement.style['font-size']=fontSize+'em'；};while（dataElement.firstChild）{dataElement.firstChild.remove（）}对于（var i=0；i<content.length；++i）{常量spanElem=document.createElement（'span'），ch=含量[i]；spanElem.setAttribute（'data-ch'，ch）；spanElem.appendChild（document.createTextNode（ch==''？'\u00A0'：ch））；data.appendChild（spanElem）；}#数据{位置：相对；顶部：2米；高度：2米；字体大小：2em；}#数据跨度{显示：内联块；位置：相对；颜色：透明；}#数据跨度：之前，#数据范围：之后{content:attr（数据ch）；显示：内联块；位置：绝对；顶部：0；右：0；底部：0；左：0；文本对齐：居中；颜色：初始；}#数据范围：之后{颜色：红色；-webkit掩码图像：线性渐变（向右，透明0，透明50%，白色50%，白色100%）；掩模图像：线性梯度（向右，透明0，透明50%，白色50%，白色100%）；}字体大小：<input-type=“range”min=1 max=4 step=0.05 value=2 oninput=“zoom（this.value）”onchange=“zoom（this.value）”>＜div id=“data”＞后备解决方案。。。对于所有浏览器</div>

所有解决方案都是通过拆分字母并将其包装在<span>中来实现的。我们不必将字母分成两种情况：

如果字体是单空格。如果使用垂直布局。

第二部分{字体大小：80px；字号：粗体；颜色：透明；填充：0；边距：0；背景：线性梯度（90度，rgb（34，67，143）0%50%，#409FBF 50%）；背景剪辑：文本；-webkit背景剪辑：文本；}一{字体系列：'Nova Mono'；背景重复：repeat-x；背景大小：45px；}.2个{字体系列：'Gideon Roman'；写入模式：垂直lr；文本方向：直立；字母间距：-35px；高度：500px；}<!-- 获取字体--><link rel=“preconnect”href=“https://fonts.googleapis.com"><link rel=“preconnect”href=“https://fonts.gstatic.com“交叉原点><link href=“https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap“rel=”stylesheet“><link href=“https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap“rel=”stylesheet“><div id=“one”class=“one”>X-RAY冬季</div><div class=“two”>最小</div>

字体不可用时的预期输出：

我知道背景剪辑和渐变的使用已经在其他答案中得到了证明，只不过是在不需要拆分字母的情况下。

FWIW，这是我对仅使用CSS的看法：http://codepen.io/ricardozea/pen/uFbts/

几个注意事项：

我这样做的主要原因是为了测试自己，看看我是否能够完成一半角色的造型，同时为OP提供一个有意义的答案。我知道，这不是一个理想的或最具扩展性的解决方案，这里的人提出的解决方案对于“现实世界”场景要好得多。我创建的CSS代码是基于我脑海中的第一个想法和我自己解决这个问题的方法。我的解决方案仅适用于对称字符，如X、A、O、M。**它不适用于非对称字符，例如B、C、F、K或小写字母。**然而，这种方法用不对称的字符创造了非常有趣的“形状”。尝试将CSS中的X改为K或小写字母，如h或p：）

HTML

<span class="half-letter"></span>

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

我刚刚完成了插件的开发，每个人都可以使用它！希望你会喜欢。

在GitHub上查看项目-查看项目网站。（这样可以查看所有拆分样式）

用法

首先，确保包含jQuery库。获取最新jQuery版本的最佳方法是使用以下内容更新head标记：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

下载文件后，确保将其包含在项目中：

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

加成

您所要做的就是为包装文本的元素添加splitchar类，然后添加所需的样式。例如

<h1 class="splitchar horizontal">Splitchar</h1>

完成所有这些之后，只需确保在文档就绪文件中调用jQuery函数，如下所示：

$(".splitchar").splitchar();

自定义

为了使文本看起来完全符合您的要求，您所要做的就是像这样应用您的设计：

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

就是这样！现在您已经设置了Splitchar插件。有关它的更多信息，请访问http://razvanbalosin.com/Splitchar.js/.