PROSAGA码农传奇-go-是否可以将CSS应用于角色的一半？

0# 坚挺的阿袁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    <img src =“https://i.stack.imgur.com/RftEr.png”alt =“在此处输入图片说明”/>
  </p>
  <P>
    我刚刚玩@ Arbel的解决方案：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

1# 一生流水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <BLOCKQUOTE>
    <P>
      的<strong>
        编辑（2017年10月）：
         <code>
          background-clip
        </code>
         更确切地说
         <code>
          background-image options
        </code>
         现在每个主要浏览器都支持：
        <a href="http://caniuse.com/#search=background-clip" rel="noreferrer">
          我可以用吗
        </A>
      </强>
    </p>
  </BLOCKQUOTE>
  <P>
    是的，你可以只用一个字符，只用CSS。
  </p>
  <P>
    但是，仅限Webkit（和Chrome）：
  </p>
  <P>
    <a href="http://jsbin.com/rexoyice/1/" rel="noreferrer">
      http://jsbin.com/rexoyice/1/
    </A>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <h1>X</h1>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    在视觉上，所有使用两个字符的例子（通过JS，CSS伪元素或只是HTML）看起来很好，但请注意，所有这些都会向DOM添加可能导致可访问性的内容 - 以及文本选择/剪切/粘贴问题。
  </p>
</DIV>

2# 苞米地里的蒙面妖 | 2019-08-31 10-32

3# 雨儿 | 2019-08-31 10-32

4# 永远的记忆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    如果您愿意，也可以使用SVG执行此操作：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    <a href="http://codepen.io/nicbell/pen/jGcbq">
      http://codepen.io/nicbell/pen/jGcbq
    </A>
  </p>
</DIV>

5# 记忆短浅♡思念不变 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    您可以使用以下代码。这个例子我在这里使用过
     <code>
      h1
    </code>
     标记并添加了一个属性
     <code>
      data-title-text="Display Text"
    </code>
     将出现不同颜色的文字
     <code>
      h1
    </code>
     标记文本元素，它生成半色调文本，如下例所示
  </p>
  <P>
    <a href="https://i.stack.imgur.com/yQQha.png" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/yQQha.png”alt =“在此处输入图片说明”/>
    </A>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <h1 data-title-text="Display Text">Display Text</h1>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

6# 产品你是狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    <img src =“https://i.stack.imgur.com/oBWFs.png”alt =“示例”/>
  </p>
  <HR />
  <H2>
    <a href="http://jsfiddle.net/CL82F/14/" rel="noreferrer">
      JSFiddle DEMO
    </A>
  </H2>
  <P>
    我们只使用CSS伪选择器来做到这一点！
  </p>
  <P>
    此技术适用于动态生成的内容和不同的字体大小和宽度。
  </p>
  <P>
    的<strong>
      HTML：
    </强>
  </p>
   <pre>
    <code>
      <div class='split-color'>Two is better than one.</div>

</code>
  </pre>
  <P>
    的<strong>
      CSS：
    </强>
  </p>
   <pre>
    <code>
      .split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

</code>
  </pre>
  <P>
    要包装动态生成的字符串，您可以使用如下函数：
  </p>
   <pre>
    <code>
      // Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

output.push(wrapper.outerHTML);
  });

return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;

el.innerHTML = wrapString(txt);
}

</code>
  </pre>
</DIV>

7# 拥有小太阳的向日葵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
   <pre>
    <code>
      .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;

}

</code>
  </pre>
  <P>
    <a href="http://experimental.samtremaine.co.uk/half-style/">
      http://experimental.samtremaine.co.uk/half-style/
    </A>
  </p>
  <P>
    你可以将这段代码撬开来做各种有趣的事情 - 这只是我的同事和我昨晚想出来的一个实现。
  </p>
</DIV>

8# CTO啊哦 | 2019-08-31 10-32

9# Innate Mind | 2019-08-31 10-32

10# Charizard | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    对于较短的文字，这样的事情怎么样？
  </p>
  <P>
    如果您使用循环执行某些操作，使用JavaScript重复这些字符，它甚至可以用于更长的文本。无论如何，结果是这样的：
  </p>
  <P>
    <a href="https://i.stack.imgur.com/IjKUY.png" rel="noreferrer">
      <img src =“https://i.stack.imgur.com/IjKUY.png”alt =“是否可以将CSS应用于角色的一半？”/>
    </A>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

11# 易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    <EM>
      只是为了历史记录！
    </EM>
  </p>
  <P>
    我在5  -  6年前为自己的工作提出了一个解决方案
    <a href="http://mrreiha.github.io/gradext/" rel="nofollow noreferrer">
      Gradext
    </A>
     （纯javascript和纯css，没有依赖）。
  </p>
  <P>
    技术说明是你可以创建一个这样的元素：
  </p>
   <pre>
    <code>
      <span>A</span>

</code>
  </pre>
  <P>
    现在，如果要在文本上创建渐变，则需要创建一些多个图层，每个图层都单独进行着色，并且创建的光谱将说明渐变效果。
  </p>
  <P>
    例如，看看这个词
    <EM>
      LOREM
    </EM>
     里面的
     <code>
      <span>
    </code>
     并会产生水平渐变效果（
    <a href="http://mrreiha.github.io/gradext/#examples" rel="nofollow noreferrer">
      检查示例
    </A>
     ）：
  </p>
   <pre>
    <code>
       <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>

</code>
  </pre>
  <P>
    并且你可以继续长时间和长段的这种模式。
  </p>
  <P>
    <a href="http://mrreiha.github.io/gradext/#examples" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/yMu0s.png”alt =“在此处输入图片说明”/>
    </A>
  </p>
  <H2>
    的<strong>
      但！
    </强>
  </H2>
  <P>
    如果你想创建一个怎么办？
    的<strong>
      垂直梯度
    </强>
     对文本的影响？
  </p>
  <P>
    然后是另一个可能有用的解决方案。我会详细描述。
  </p>
  <P>
    假设我们的第一个
     <code>
      <span>
    </code>
     再次。但内容不应该是单独的字母;内容应该是全文，现在我们要复制一样的??
     <code>
      <span>
    </code>
     一次又一次（跨度的数量将定义渐变的质量，更多的跨度，更好的结果，但性能不佳）。看看这个：
  </p>
   <pre>
    <code>
      <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>

</code>
  </pre>
  <P>
    <a href="http://mrreiha.github.io/gradext/#examples" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/Zo4J9.png”alt =“在此处输入图片说明”/>
    </A>
  </p>
  <H2>
    的<strong>
      再说一遍，但是！
    </强>
  </H2>
  <P>
    如果你想让这些渐变效果移动并从中创建动画怎么办？
  </p>
  <P>
    好吧，还有另一种解决方案。你一定要检查一下
    <a href="http://mrreiha.github.io/gradext/" rel="nofollow noreferrer">
       <code>
        animation: true
      </code>
    </A>
     甚至
    <a href="http://mrreiha.github.io/gradext/" rel="nofollow noreferrer">
       <code>
        .hoverable()
      </code>
    </A>
     根据光标位置导致渐变开始的方法！ （听起来很酷xD）
  </p>
  <P>
    <a href="http://mrreiha.github.io/gradext/#examples" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/0zbUJ.gif”alt =“在此输入图像说明”/>
    </A>
  </p>
  <P>
    这就是我们如何在文本上创建渐变（线性或径向）。如果您喜欢这个想法或想了解更多信息，请查看提供的链接。
  </p>
  <HR />
  <P>
    也许这不是最好的选择，也许不是最好的方式，但它会开辟一些空间来创造令人兴奋和令人愉快的动画，以激励其他人获得更好的解决方案。
  </p>
  <P>
    它允许您在文本上使用渐变样式，即使是IE8也支持！
  </p>
  <P>
    <a href="http://mrreiha.github.io/gradext/" rel="nofollow noreferrer">
      在这里，您可以找到一个现场演示
    </A>
     原始存储库是
    <a href="https://github.com/mrReiha/Gradext" rel="nofollow noreferrer">
      这里也是GitHub，开源
    </A>
     并准备得到一些更新（：D）
  </p>
  <P>
    这是我第一次（是的，5年之后，你已经听到了它）在互联网上的任何地方提到这个存储库，我很兴奋！
  </p>
</DIV>