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

战场小包
1,471 阅读3分钟

「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」

前言

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

基础知识

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

  1. background-clip: 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值，下面来一一介绍一下:
    • border-box: 背景延伸至边框外沿（但是在边框下层）
    • padding-box: 背景延伸至内边距（padding）外沿。不会绘制到边框处
    • content-box: 背景被裁剪至内容区（content box）外沿
    • text: 背景被裁剪成文字的前景色

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

  1. -webkit-text-stroke: 文字描边效果的宽与颜色，详情可以见下面案例。
<style>
.stroke {
    -webkit-text-stroke: 2px red;
    font-size: 200px;
}
</style>
<p class="stroke"></p>

stroke.png

代码实现

描边文字实现

在基础知识部分，讲解过 -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;
}

home.png

background-clip设置

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

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

设置后的效果如下:

background-clip.png

设置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文字填充效果

往期精彩文章

后语

伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题，或者对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！

如果感觉评论区说不明白，也可以添加我的微信(li444186976)或者 qq(3315161861) 详细交流，名字都是战场小包。

avatar
文章
阅读
粉丝