CSS实现简单的文字特效

缘起

参加了一个在墨尔本举行的Junior Developer Meetup, 有几位前辈分享了一些之前不知道的知识，包括如何设计对残疾人更加友好的网页，CSS的GRID布局，以及CSS的文字特效。其中感觉CSS的文字特效非常有意思，听的时候没有做笔记，所以回来以后半自己瞎写办自己搜来把使用的方法来回顾一下。
原作者的CodePenText Effects - a Collection by Mandy Michael on CodePen
因为原作者提供了很多的特效，我就挑几个我觉得比较有意思而且相对简单的。

Split Color Text Effect

通过简单的CSS来实现一个Split color text effect(实在不知道怎么翻译成中文)。
首先来看HTML代码。

    <div class="parent">
        <h1 data-heading="hello">hello</h1>
    </div>

然后是CSS代码。

.parent {
    background: linear-gradient(
        to right,
        white 0%,
        white 50%,
        black 50%,
        black 100%
    );
    height: 100vh;
    width: 100%;
}

h1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color: white;
    white-space: nowrap;
}

h1:before {
    content: attr(data-heading);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    color: #000;
}

简单的解释一下，首先将h1中的文字内容完整的放在h1的data-heading这个attribute里面，以便之后在CSS文件中使用。
在CSS文件中，对before的content使用attr(data-heading)来获取content。
之后来修改颜色。这个特效是通过使用before创建一个新的图层，然后将这个新的图层的颜色设置为想要的颜色。比如代码中的例子，左边背景色为白色，即将左边的文字颜色设置为黑色以突出对比，同理将右边的文字设置为黑色。而上文所说的左边文字和右边文字分别由before和h1本身组成。即before中的文字只显示50%，故覆盖掉了h1文字的左边，而h1的右边部分仍维持原样。
注意到在h1的CSS中有transform，作用是将文字完全居中。html - Transform: translate(-50%, -50%) - Stack Overflow。
Reference
How to Create a Vertical Split Text Effect with CSS

Stripy Rainbow Text Effect

(请忽略这个丑陋配色)
先直接上代码, HTML基本维持不变。

<h1 class="colors" data-heading="COLOR">COLOR</h1>

然后是CSS


.colors {
    font-size: 20vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #2599d8;


}
.colors:before, .colors:after {
    content: attr(data-heading);
    position: absolute;
    overflow: hidden;
    left: 0px;
}

.colors::before {
    height: 40%;
    z-index: 4;
    color: #f1573f;
}

.colors::after {
    height: 60%;
    z-index: 3;
    color: #6abc4e;
}

还是简单的解释一下（其实看过上面的例子应该很好理解了）。所做的事情就是使用after， before,，和h1本身组成三个分层，每个分层占用不同的高度和颜色，再设置每个层次的z-index值使得覆盖掉下层的颜色。
原作者本身的代码实际上有五个分层，我比较懒就没弄了，原理是通过再添加一个span的h1中间。

同理还可以做每个文字不同颜色。这个就不贴代码了。