#yyds干货盘点# 实现渐变文字和文字倒影
Posted 战场小包
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点# 实现渐变文字和文字倒影相关的知识,希望对你有一定的参考价值。
前言
该文作为《文字效果到底能玩出多少花样》的第五篇文章,带大家实现 渐变文字和文字倒影 。
具体效果见封面图:
基础知识
今天因为要实现两种效果,预备知识有点多,分别是 background-clip 属性、 -webkit-box-reflect 属性。
- background-clip: 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值,下面来一一介绍一下:
border-box
: 背景延伸至边框外沿(但是在边框下层)padding-box
: 背景延伸至内边距(padding
)外沿。不会绘制到边框处content-box
: 背景被裁剪至内容区(content box
)外沿text
: 背景被裁剪成文字的前景色
- -webkit-box-reflect
-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?
- 方位: 设置倒影的朝向
- 偏移大小: 设置倒影偏离初始元素的距离
- 遮罩图片: 给元素倒影添加遮罩层,效果语法类似于 background-image 属性。
渐变文字
由于 color 属性不能设置渐变色,所以渐变文字的实现并不简单,但众多大佬也通过探索也发掘了好多种实现方案。例如使用 canvas 的 CanvasRenderingContext2D.createLinearGradient()
方法实现;使用 background-clip: text 配合 background 来实现;-webkit-mask 配合 attr 来实现等。
本文主要使用 background-clip: text 配合 background 来实现。
- background 设置渐变色
background: linear-gradient(90deg, #7e40ee, #00f, #63d9ee);
- background-clip: text 裁剪渐变
-webkit-background-clip: text;
background-clip: text;
- 文字 color 设置为透明
color: transparent;
渐变文字效果就实现了。
文字倒影效果
chrome
浏览器提供了 -webkit-box-reflect
属性,通过这个属性可以轻松实现 chrome
下的倒影效果。
color: rgb(237, 125, 49);
-webkit-box-reflect: below -2px -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0)),
to(rgba(255, 255, 255, 0.2))
);
后语
伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞
以上是关于#yyds干货盘点# 实现渐变文字和文字倒影的主要内容,如果未能解决你的问题,请参考以下文章
#yyds干货盘点# 使用background实现花式下划线
#yyds干货盘点#愚公系列2022年02月 微信小程序-全局配置属性之tabBar