文字到底能玩出多少花样(二)background-clip实现hover文字填充效果

前言

该文作为《文字到底能玩出多少花样》的第二篇文章，带大家学习 background-clip实现hover文字填充效果 。

基础知识

在文章的最开始，还是带大家来学习几个预备小知识。

1. background-clip:  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值，下面来一一介绍一下:

• border-box: 背景延伸至边框外沿（但是在边框下层）
• padding-box: 背景延伸至内边距（padding）外沿。不会绘制到边框处
• content-box: 背景被裁剪至内容区（content box）外沿
• text: 背景被裁剪成文字的前景色

具体属性值演示可以参考: background-clip

2. -webkit-text-stroke: 文字描边效果的宽与颜色，详情可以见下面案例。

<style>
.stroke {
    -webkit-text-stroke: 2px red;
    font-size: 200px;
}
</style>
<p class="stroke"></p>
复制代码

代码实现

描边文字实现

在基础知识部分，讲解过 -webkit-text-stroke 属性，可以设置文字描边，但文字颜色会和描边颜色同时存在(详情见上图)，此时只需要设置 color: transparent 将文字颜色置为透明色，就可以实现只有描边，文字部分镂空的效果。

具体见下面代码和绘制完的描边文字图像

a {
    font-size: 100px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #198ce6;
    color: transparent;
    transition: 0.5s linear;
}
复制代码

background-clip设置

background-clip: text 可以把背景裁剪成文字的前景色，设置背景颜色为 #198ce6，再通过 background-clip: text 就可以控制背景在文字镂空部分显示。

background: linear-gradient(#198ce6 0 100%)  no-repeat;
-webkit-background-clip: text;
background-clip: text;
复制代码

设置后的效果如下:

设置hover动画效果

上面已经成功设置了背景在文字镂空部分显示，那么剩下就只有动画部分待实现。 CSS3 提供了 transition 属性可以设置简单的动画，因此只需将背景色默认值设置为 0 ，hover 时恢复 100% 就能实现封面效果。

a{
    background: linear-gradient(#198ce6 0 100%) left/0 no-repeat;
    transition: 0.5s linear;
}
a:hover {
    background-size: 100%;
}
复制代码

源码仓库

传送门: background-clip实现hover文字填充效果