CSS文字效果：渐变、描边、阴影、倒影、填充图片、动画效果 转载
转载：https://juejin.cn/post/7362084722821087272
渐变
文字渐变？😮 咋做？好像没有直接的 CSS 属性可以使用呀。。。（老玩家可以跳过，继续往下瞧）
不会？那换个问题，背景渐变！这个会了吧？呃...😐 这个可以会吖!!!
且看：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
width: fit-content;
font-size: 32px;
font-weight: bold;
background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
}
</style>
</head>
<body>
<p class="text">谁对时间越吝啬，时间就对谁越慷慨。</p>
</body>
</html>
效果：
丑？别在意这些细节😁。这里咱们通过 background-image 属性与 CSS 的图像函数 linear-gradient() 就能实现背景色的渐变，这点相信各位彦祖和亦菲应该都很熟啦。
注意，加了一个
width: fit-content;属性，为了一会文字更好的呈现渐变效果。
那么，背景渐变咱们实现了，文字的渐变呢？👀
简单，瞧：
.text {
...
background-clip: text;
color: transparent;
}
效果：
就加两行，通过 background-clip: text; 属性能将背景裁剪成文字的前景色。当然，也要注意将文字颜色设置成透明色（color: transparent;）。
你可以理解成背景现在被裁剪成文字的模样，与文字重叠了，要看到背景，自然要将本来的文字颜色设置成透明，咱们才能看到背景。
描边
文字描边？空心文字？啥玩意？😦
先看看效果：
噢，有点意思。
具体实现：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 32px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #FF7F00; /*描边*/
}
</style>
</head>
<body>
<p class="text">谁对时间越吝啬，时间就对谁越慷慨。</p>
</body>
</html>
主要通过 -webkit-text-stroke 属性来实现，它等同于 -webkit-text-stroke-width 和 -webkit-text-stroke-color ，很简单吧，没什么可说的。😗
阴影
文字阴影？
这与我们常用的"盒子"阴影（box-shadow）差不多啦。
且看：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 32px;
font-weight: bold;
color: #7F00FF;
text-shadow: 1px 1px 12px red; /*阴影*/
}
</style>
</head>
<body>
<p class="text">谁对时间越吝啬，时间就对谁越慷慨。</p>
</body>
</html>
效果：
文字阴影可以通过 text-shadow 属性来实现，具体参数描述？就自行直接上MDN上查阅啦。💀
倒影
文字倒影？这也是有现成的 CSS 属性可以使用的。
但是呢，它有点小问题，咱们先来看看实现效果：
实现过程：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 32px;
font-weight: bold;
width: fit-content;
background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
color: transparent;
background-clip: text;
/*倒影*/
-webkit-box-reflect: below -4px linear-gradient(to bottom, transparent 10%, white);
}
</style>
</head>
<body>
<p class="text">谁对时间越吝啬，时间就对谁越慷慨。</p>
</body>
</html>
咱们只加了一行 "倒影" 的样式属性，其他样式属性都是前面讲过的渐变效果样式。
而 -webkit-box-reflect 属性支持三个属性值，分别是：偏移量、间距、蒙版。
- 方向：
above-上边、below-下边、left-左边、right-右边。 - 偏移量：偏移量其实就是倒影与原来文字的间距。
- 蒙版："描述要应用于反射的蒙版" 这是官方的描述，其实不是很好理解😵；它的值类型仅能是一些图像函数 ，例如
linear-gradient函数。注意，这也仅是确定了它的"值类型"而已哦!!!并不是说这个函数就能随意使用了，它也只能是在一些透明度上做做文章。小编个人的理解是它像在倒影上添加了一层"蒙层"，而我们能做的就是调整这一层蒙层的透明度，仅此而已。（你可以多多尝试下就明白啦👻）
最后，这个属性它还有一点兼容性问题，它是非标准的并且火狐浏览器不支持，且不能在 span 标签中使用，，最好在 div 、 p 等元素中使用呗。
填充图片
文字填充图片相信各位多多少少也见识过，它本质和咱们前面讲的渐变实现是差不多的。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.text {
width: fit-content;
font-size: 100px;
font-weight: bold;
background-image: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d894ab09355e438eb25e503d4d36f401~tplv-k3u1fbpfcp-jj:135:90:0:0:q75.avis#?w=500&h=156&s=4290&e=jpg&b=375964);
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<p class="text">橙某人</p>
</body>
</html>
就把 background-image 改成一个图片地址即可。
效果：
不过，它看起来有点丑？😕
咱们可以稍微再给它修饰修饰。
-webkit-text-stroke: 1px #32CD32;
filter: drop-shadow(1px 1px 1px rgb(0, 0, 0, 0.8));
它给加描边和滤镜：
（好像更丑了😅，就这样子吧。）
动画效果
动画效果？这又是啥呢？
且看：
还是可以吧？😲 可能是小编调的颜色不够搭配，要不估计更绚丽一些。
直接贴代码瞧瞧：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 32px;
font-weight: bold;
width: fit-content;
background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
color: transparent;
background-clip: text;
/*动画效果*/
background-size: 300% 100%;
animation: gradientAnimation 2s linear infinite;
animation-direction: alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
</style>
</head>
<body>
<p class="text">谁对时间越吝啬，时间就对谁越慷慨。</p>
</body>
</html>
咱们主要是将渐变的背景宽度设置为了三倍，然后通过来回移动背景就能完成这个动画了。
animation-direction 属性可以让动画是应正向播放、反向播放还是在正向和反向之间交替播放。
链接：https://juejin.cn/post/7362084722821087272
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
