这样的短文本怎么样？

如果您执行了循环操作，并使用JavaScript重复字符，则它甚至可以用于较长的文本。无论如何，结果是这样的：

p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}

<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>

一个很好的纯WebKit解决方案，可以利用该background-clip: text支持：http : //jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

http://experimental.samtremaine.co.uk/half-style/

您可以撬动这段代码来做各种有趣的事情-这只是我的同伙的一个实现，我昨晚想出了。

另一个仅CSS的解决方案（但是，如果您不想编写特定于字母的CSS，则需要数据属性）。此功能可全面运行（经过测试的IE 9/10，Chrome最新和FF最新）

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}

<span data-char="X">X</span>

如果您对此感兴趣，那么卢卡斯·贝伯（Lucas Bebber）的故障（Glitch）就是一个非常相似且超酷的效果：

使用简单的SASS Mixin创建，例如

.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

Chris Coyer的CSS技巧和Lucas Bebber的Codepen页面上的更多详细信息

编辑（2017年10月）：background-clip或者background-image options现在每个主流浏览器都支持：CanIUse

是的，您只能使用一个字符和CSS。

仅限Webkit（和Chrome）：

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>X</h1>

从外观上看，所有使用两个字符的示例（通过JS，CSS伪元素或只是HTML）看起来都不错，但请注意，所有示例都向DOM添加了内容，这可能会导致可访问性-以及文本选择/剪切/粘贴问题。

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

在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>

标记

您所要做的就是为class赋值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/。