奇思妙想 CSS 文字动画-六虎

之前有些过两篇关于字体的文章，是关于怎么定义字体的：

你该知道的字体 font-family
Web 字体 font-family 再探秘

本文将会和这篇 — CSS 奇思妙想边框动画相似，讲一些文字作用，运用不同的特点调配，完结各式各样的文字动效。

Google Font

在写各种 DEMO 的时分，有的时分一些特别的字体能更好的体现动画的作用。这儿讲一个快速引进不同格局字体的小技巧。

便是 Google Font 这个网站，上面有十分多的不同的开源字体：

当咱们相中了一个咱们喜爱的字体，它也提供了十分快速的便捷的引进方法。选中对应的字体，挑选 +Select this style，便能够经过 link 和 @import 两种方法引进：

运用 link 标签引进：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">

OR，在 CSS 代码中，运用 @import 引进：

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap');
</style>

上述两种方法内部其实都是运用的 @font-face 进行了字体的定义。

咱们能够经过 @font-face 快速声明指定一个自定义字体。相似这样：

@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

这样，运用 Google Font，咱们就能够便捷的享受各种字体了。

我在我的个人项目或许一些 DEMO 中，需求一些艺术字体或许特别字体展现不一样的作用时，常常会运用这种方法。而至于在业务中，是否需求引进一些特别字体，就见仁见智了。

接下来，就会分门别类的看看，字体在 CSS 中，和不同是特点相结合，能够鼓捣出什么样的作用。

文字与暗影

经过将字体与字体暗影 text-shadow，相结合，暗影的不同运用方法，发生不一样的作用。

咱们经过一系列 Demo 来看看。

长暗影文字作用

经过多层次，色彩逐步改变（通明）的暗影改变，能够生成长暗影：

div {
text-shadow: 0px 0px #992400, 1px 1px rgba(152, 36, 1, 0.98), 2px 2px rgba(151, 37, 2, 0.96), 3px 3px rgba(151, 37, 2, 0.94), 4px 4px rgba(150, 37, 3, 0.92), 5px 5px rgba(149, 38, 4, 0.9), 6px 6px rgba(148, 38, 5, 0.88), 7px 7px rgba(148, 39, 5, 0.86), 8px 8px rgba(147, 39, 6, 0.84), 9px 9px rgba(146, 39, 7, 0.82), 10px 10px rgba(145, 40, 8, 0.8), 11px 11px rgba(145, 40, 8, 0.78), 12px 12px rgba(144, 41, 9, 0.76), 13px 13px rgba(143, 41, 10, 0.74), 14px 14px rgba(142, 41, 11, 0.72), 15px 15px rgba(142, 42, 11, 0.7), 16px 16px rgba(141, 42, 12, 0.68), 17px 17px rgba(140, 43, 13, 0.66), 18px 18px rgba(139, 43, 14, 0.64), 19px 19px rgba(138, 43, 15, 0.62), 20px 20px rgba(138, 44, 15, 0.6), 21px 21px rgba(137, 44, 16, 0.58), 22px 22px rgba(136, 45, 17, 0.56), 23px 23px rgba(135, 45, 18, 0.54), 24px 24px rgba(135, 45, 18, 0.52), 25px 25px rgba(134, 46, 19, 0.5), 26px 26px rgba(133, 46, 20, 0.48), 27px 27px rgba(132, 47, 21, 0.46), 28px 28px rgba(132, 47, 21, 0.44), 29px 29px rgba(131, 48, 22, 0.42), 30px 30px rgba(130, 48, 23, 0.4), 31px 31px rgba(129, 48, 24, 0.38), 32px 32px rgba(129, 49, 24, 0.36), 33px 33px rgba(128, 49, 25, 0.34), 34px 34px rgba(127, 50, 26, 0.32), 35px 35px rgba(126, 50, 27, 0.3), 36px 36px rgba(125, 50, 28, 0.28), 37px 37px rgba(125, 51, 28, 0.26), 38px 38px rgba(124, 51, 29, 0.24), 39px 39px rgba(123, 52, 30, 0.22), 40px 40px rgba(122, 52, 31, 0.2), 41px 41px rgba(122, 52, 31, 0.18), 42px 42px rgba(121, 53, 32, 0.16), 43px 43px rgba(120, 53, 33, 0.14), 44px 44px rgba(119, 54, 34, 0.12), 45px 45px rgba(119, 54, 34, 0.1), 46px 46px rgba(118, 54, 35, 0.08), 47px 47px rgba(117, 55, 36, 0.06), 48px 48px rgba(116, 55, 37, 0.04), 49px 49px rgba(116, 56, 37, 0.02), 50px 50px rgba(115, 56, 38, 0);
}

当然，多重暗影以及每重的色彩咱们很难一个一个手动去写，在写长暗影的时分一般需求凭借 SASS、LESS 去协助节省时间：

@function makelongrightshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 50 {
$color: fade-out(desaturate($color, 1%), .02);
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
div {
text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}

立体暗影文字作用

假如多层暗影，可是色彩改变没那么激烈，能够塑造一种立体的作用。

div {
text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212);
}

内嵌暗影文字作用

合理的暗影色彩和布景底色调配，调配，能够完结相似内嵌作用的暗影。

div {
color: #202020;
background-color: #2d2d2d;
letter-spacing: .1em;
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
}

CodePen Demo — 5 text shadow effects in css3

氖光作用（Neon）

氖光作用，英文名叫 Neon，是我在 Codepen 上看到的最多的作用之一。它的原理十分简略，却能够发生十分酷炫的作用。

咱们只需求设置 3~n 层暗影作用，每一层的含糊半径（文字暗影的第三个参数）间隔较大，而且每一层的暗影色彩相同即可。

p {
color: #fff;
text-shadow:
0 0 10px #0ebeff,
0 0 20px #0ebeff,
0 0 50px #0ebeff,
0 0 100px #0ebeff,
0 0 200px #0ebeff
}

当然，一般运用 Neon 作用时，布景底色都是偏黑色。

合理运用 Neon 作用，就能够制造十分多有意思的动效。比如作用于鼠标 hover 上去的作用：

p {
transition: .2s;
&:hover {
text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;
}
}

CodePen Demo — Neon Demo

CodePen 上有一个 2K+ 赞的 DEMO，完结了十分赞的 Neon 作用，能够戳进去看看 CodePen — Neon Glow。

也能够选取适当适宜的字体，合作动画作用，完结一种渐进的亮灯作用：

<p>
<span id="n">n</span>
<span id="e">e</span>
<span id="o">o</span>
<span id="n2">n</span>
</p>

p:hover span {
animation: flicker 1s linear forwards;
}
p:hover #e {
animation-delay: .2s;
}
p:hover #o {
animation-delay: .5s;
}
p:hover #n2 {
animation-delay: .6s;
}
@keyframes flicker {
0% {
color: #333;
}
5%, 15%, 25%, 30%, 100% {
color: #fff;
text-shadow:
0px 0px 5px var(--color),
0px 0px 10px var(--color),
0px 0px 20px var(--color),
0px 0px 50px var(--color);
}
10%, 20% {
color: #333;
text-shadow: none;
}
}

截 GIF 图的帧率不太够，看着作用不太好，能够点进下面的 DEMO 感触下：

CodePen Demo — Neon Demo

文字与布景

CSS 中的布景 background，也提供了一些特点用于增强文字的作用。

background-clip 与文字

布景中有个特点为 background-clip，其作用便是设置元素的布景（布景图片或色彩）的填充规则。

与 box-sizing 的取值十分相似，一般而言，它有 3 个取值，border-box，padding-box，content-box，后面规范新增了一个 background-clip。时至今日，部分浏览器仍需求增加前缀 webkit 进行运用 -webkit-background-clip。

运用了这个特点的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的布景即为区块的布景，文字之外的区域都将被裁剪掉。

看个最简略的 Demo ，没有运用 background-clip:text :

<div>Clip</div>
<style>
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
}
</style>

作用如下：

CodePen Demo

运用 `background-clip:text`

咱们略微改造下上面的代码，增加 -webkit-background-clip:text：

div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
background-clip: text;
}

作用如下：

CodePen Demo

看到这儿，或许有人就纳闷了，这不便是文字设置 color 特点嘛。

别急，由于文字设置了色彩，挡住了 div 块的布景，假如将文字设置为通明呢？文字是能够设置为通明的 color: transparent 。

div {
color: transparent;
background-clip: text;
}

作用如下：

CodePen Demo

经过将文字设置为通明，本来 div 的布景就闪现出来了，而文字以外的区域悉数被裁剪了，这便是 background-clip:text 的作用。

运用 `background-clip` 图文调配

这样，咱们能够选取适宜的图片适宜的字体，完结恣意风格的文字作用。

CodePen Demo — background-clip: text & Image text

又或许，运用这个作用完结一张构思海报：

运用 `background-clip` 完结突变文字

再者，运用这个特点，也能够轻松的完结突变色的文字：

{
background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
background-clip: text;
}

合作 background-position 或许 filter: hue-rotate()，让突变动起来：

{
background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
background-clip: text;
animation: huerotate 5s infinite;
}
@keyframes huerotate {
100% {
filter: hue-rotate(360deg);
}
}

CodePen Demo — background-clip: text 文字突变色

运用 `background-clip` 给文字增加高光动画

运用 background-clip，咱们还能够轻松的给文字增加高光动画。

比如这样：

其本质也是运用了 background-clip，伪代码如下：

<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>

p {
position: relative;
color: transparent;
background-color: #E8A95B;
background-clip: text;
}
p::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
background-clip: text;
background-size: 150% 100%;
background-repeat: no-repeat;
animation: shine 5s infinite linear;
}
@keyframes shine {
0% {
background-position: 50% 0;
}
100% {
background-position: -190% 0;
}
}

去掉伪元素的 background-clip: text，就能看懂原理：

CodePen Demo — shine Text && background-clip

`mask` 与文字

还有一个与布景相关的特点 — mask 。

之前在多篇文章都提到了 mask，比较详细的一篇是 — 美好的 CSS MASK，本文不对 mask 的基本概念做过多解说，向下阅读时，假如对一些 mask 的用法感到疑惑，能够再去看看。

只需求记住中心的，运用 mask 最重要结论便是：增加了 mask 特点的元素，其内容会与 mask 表明的突变的 transparent 的堆叠部分，而且堆叠部分将会变得通明。

运用 mask，咱们能够完结各种文字的进场特效：

<div>
<p>Hello MASK</p>
</div>

中心的 CSS 代码：

div {
mask: radial-gradient(circle at 50% 0%, #000, transparent 30%);
animation: scale 6s infinite;
}
@keyframes scale {
0% {
mask-size: 100% 100%;
}
60%,
100% {
mask-size: 150% 800%;
}
}

改变不同的方向，又或许是这样：

CodePen Demo — MASK Text Effect

文字与混合形式(mix-blend-mode)及滤镜(filter)

接下来，就到了十分有意思的混合形式及滤镜了。这两个特点给 CSS 世界增添了十分多的趣味性，活灵活用，会感叹 CSS 竟然如此的强壮美好。

之前有多十分多篇关于混合形式及滤镜的文章，一些根底的用法就不再赘述。

给文字增加边框，生成镂空文字

在 CSS 中，咱们能够运用 -webkit-text-stroke，给文字快速的增加边框，运用这个，能够快速生成镂空型的文字：

p {
-webkit-text-stroke: 3px #373750;
}

当然，咱们看到，用到的特点 -webkit-text-stroke 带了 webkit 前缀，存在一定的兼容性问题。

所以，在更早的时分，咱们还会运用 text-shadow，生成镂空文字。

p {
text-shadow: 0 0 5px #fff;
}

能够看到，由于运用的是暗影，所以有很明显的虚化的感觉，存在一定的瑕疵。

还有一种十分绕的方法，运用混合形式加上滤镜，也能生成镂空文字。

p {
position: relative;
color: #fff;
&::after {
content: 'Magic Text';
position: absolute;
left: 0;
top: 0;
color: #fff;
mix-blend-mode: difference;
filter: blur(1px);
}
}

这儿运用 filter: blur(1px) 生成了一个比原字体略微大一点点的字体掩盖在原字体之上，再运用 mix-blend-mode: difference 消除掉了同色的部分，只留下了运用含糊滤镜多出来的那一部分。

mix-blend-mode: difference: 差值形式（Difference），作用是检查每个通道中的色彩信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不发生改变。

示意动图如下：

CodePen Demo — Hollow TEXT EFFECT

运用混合形式，生成突变色镂空文字

好，回到上面的 -webkit-text-stroke，拿到了镂空文字后，咱们还能够运用混合形式 mix-blend-mode: multiply 生成突变色的文字。

mix-blend-mode: multiply: 正片叠底（multiply），将两个色彩的像素值相乘，然后除以255得到的成果便是最终色的像素值。一般履行正片叠底形式后的色彩比本来两种色彩都深。任何色彩和黑色正片叠底得到的仍然是黑色，任何色彩和白色履行正片叠底则保持本来的色彩不变，而与其他色彩履行此形式会发生暗室中以此种色彩照明的作用。

p {
position: relative;
-webkit-text-stroke: 3px #9a9acc;
&::before{
content: ' ';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
mix-blend-mode: multiply;
}
}

在这儿，mix-blend-mode: multiply 发挥的作用和 mask 十分的相似，咱们其实是生成了一幅突变图案，可是只要在文字轮廓内，突变色彩才会闪现。

当然，上述作用和全体的黑色底色也是有关系的。

示意图如下：

CodePen Demo — Hollow TEXT EFFECT

运用混合形式，生成光影作用文字

OK，在上述的根底上，咱们能够继续叠加混合形式，这次咱们运用剩余的一个 ::after 伪类，再增加一个 mix-blend-mode: color-dodge 混合形式，给文字加上最终的点缀，完结美好的光影作用。

mix-blend-mode: color-dodge: 色彩减淡形式（Color Dodge），检查每个通道的色彩信息，经过降低“比照度”使底色的色彩变亮来反映绘图色，和黑色混合没改变。。

中心的伪代码：

p {
position: relative;
-webkit-text-stroke: 3px #7272a5;
&::before {
content: ' ';
background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
mix-blend-mode: multiply;
}
&::after {
content: "";
position: absolute;
background: radial-gradient(circle, #fff, #000 50%);
background-size: 25% 25%;
mix-blend-mode: color-dodge;
animation: mix 8s linear infinite;
}
}
@keyframes mix {
to {
transform: translate(50%, 50%);
}
}

看看作用：

这儿就要感叹 mix-blend-mode: color-dodge 的神奇了，去掉这个混合形式，其实是这样的：

CodePen — Hollow TEXT EFFECT

好，就上面这个作用，还能够继续吗？答案是能够的。限于篇幅，本文不再继续在这个作用上深入，感兴趣的能够拿着上面的 DEMO 自己再捣鼓捣鼓。

运用混合形式完结文字与底色反色的作用

这儿仍是运用 mix-blend-mode: difference 差值形式，完结一种文字与底色反色的 Title 作用。

mix-blend-mode: difference: 差值形式（Difference），作用是检查每个通道中的色彩信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不发生改变。

代码十分的简略，咱们完结一个黑白相间的布景，文本的色彩为白色，合作上差值形式，即可完结黑底上的文字为白色，白底上的文字为黑色的作用。

p  {
background: repeating-radial-gradient(circle at 200% 200%, #000 0, #000 150px, #fff 150px, #fff 300px);
&::before {
content: "LOREM IPSUM";
color: #fff;
mix-blend-mode: difference;
}
}

能够用于一些标题作用：

CodePen Demo — Radial-gradient + Mix-blend-mode

运用混合形式完结动态类抖音风格 Glitch 作用

OK，接下来，咱们再测验下其他混合形式的调配。在 CSS 毛病艺术一文中，提到了一种毛病艺术。

什么是毛病艺术？咱们熟知的抖音的 LOGO 正是毛病艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪耀、震动的作用，很吸引人眼球。

关键点

运用 mix-blend-mode: lighten 混合形式完结两段文字结构堆叠部分为白色
运用元素位移完结错位移动动画，构成视觉上的冲击作用

看看作用：

本文篇幅有点长，代码就不上了，完整 DEMO 在这儿：

类抖音 LOGO 文字毛病作用

当然，咱们也不是一定要运用混合形式去使得交融部分为白色，能够仅仅是运用这个配色作用，根据上面作用的别的一个版本，没有运用混合形式。

关键点

运用了伪元素生成了文字的两个副本
视觉作用由位移、遮罩、混合形式完结
配色借鉴了抖音 LOGO 的风格

完整 DEMO 在这儿：

CSS文字毛病作用

仅仅运用配色没有运用混合形式的好处在于，关于每一个文字的副本，有了更大的移动距离和能够处理的空间。

Glitch Art 风格的 404 作用

略微替换一下文本文案为 404，再增加上一些滤镜作用（hue-rotate()、blur()）嘿嘿，找到了一个或许实际可用的场景：

作用一：

作用二：

两个 404 作用的 Demo 如下：

CodePen — CSS 404毛病作用
CodePen — 404毛病作用

小技巧，在运用混合形式的时，有的时分，作用不期望和布景混合在一起，能够运用 isolation: isolate 进行隔离。

运用滤镜生成文字交融作用

在你所不知道的 CSS 滤镜技巧与细节一文中，介绍了运用滤镜完结的一种交融作用。

运用了含糊滤镜叠加比照度滤镜发生的交融作用。

独自将两个滤镜拿出来，它们的作用分别是：

filter: blur()：给图像设置高斯含糊作用。
filter: contrast()：调整图像的比照度。

可是，当他们“合体”的时分，发生了美好的交融现象。简略的例子：

CodePen Demo — filter mix between blur and contrast

运用这个特性，能够完结一些文字交融的作用：

运用这个方法，咱们还能够规划一些文字交融的作用：

详细完结你能够看这儿：

CodePen Demo — word animation | word filter

文字与 SVG

最终，咱们再来看看文字与 SVG。

在 SVG 与 CSS 的调配中，有一类十分适合拿来做动画的特点，也便是 stroke-* 相关的几个特点，运用它们，咱们只需求掌握简略的 SVG 语法，就能够快速制造相关的线条动画。

咱们运用 SVG 中几个和边框、线条相关的特点，来完结文字的线条动画，下面罗列一下，其实大部分和 CSS 比照一下十分好了解，仅仅换了个姓名：

stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
stroke：类比 css 中的 border-color，给 svg 图形设定边框色彩；
stroke-linejoin | stroke-linecap：设定线段衔接处的款式；
stroke-dasharray：值是一组数组，没数量上限，每个数字替换表明划线与间隔的宽度；
stroke-dashoffset：则是虚线的偏移量

详细的更深入的介绍，能够看看这篇：【Web动画】SVG 线条动画入门

线条文字动画

接下来，咱们运用 stroke-* 相关特点，完结一个简略的线条文字动画。

<svg viewBox="0 0 400 200">
<text x="0" y="70%"> Lorem </text>
</svg>

svg text {
animation: stroke 5s infinite alternate;
letter-spacing: 10px;
font-size: 150px;
}
@keyframes stroke {
0% {
fill: rgba(72, 138, 20, 0);
stroke: rgba(54, 95, 160, 1);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 1;
}
70% {
fill: rgba(72, 138, 20, 0);
stroke: rgba(54, 95, 160, 1);
stroke-width: 3;
}
90%,
100% {
fill: rgba(72, 138, 204, 1);
stroke: rgba(54, 95, 160, 0);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0;
}
}

动画的中心便是，运用动态改变文字的 stroke-dasharray 和 stroke-dashoffset 构成视觉上的线条变换，动画的最终再给文字上色。看看作用：

CodePen Demo — SVG Text Line Effect

最终

本文介绍了一些我认为比较有意思的文字动画小技巧，当然 CSS 中还有十分多有意思的文字作用，限于篇幅，不一一展开。

本文到此结束，期望对你有协助 :)，想 Get 到最有意思的 CSS 资讯，千万不要错过我的大众号 — iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ，继续更新，欢迎点个 star 订阅保藏。

假如还有什么疑问或许主张，能够多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

奇思妙想 CSS 文字动画

Google Font

文字与暗影

长暗影文字作用

立体暗影文字作用

内嵌暗影文字作用

氖光作用（Neon）

文字与布景

background-clip 与文字

运用 background-clip:text

运用 background-clip 图文调配

运用 background-clip 完结突变文字

运用 background-clip 给文字增加高光动画

mask 与文字

文字与混合形式(mix-blend-mode)及滤镜(filter)

给文字增加边框，生成镂空文字

运用混合形式，生成突变色镂空文字

运用混合形式，生成光影作用文字

运用混合形式完结文字与底色反色的作用

运用混合形式完结动态类抖音风格 Glitch 作用

关键点

关键点

Glitch Art 风格的 404 作用

运用滤镜生成文字交融作用

文字与 SVG

线条文字动画

最终

相关文章

深克隆 VS 浅克隆｜深比较 VS 浅比较｜回调函数

Vite性能优化之分包策略

Modal 管理体操二三事 (实践篇)

懒加载处理，不要再傻傻监听页面滚动

作者信息

运用 `background-clip:text`

运用 `background-clip` 图文调配

运用 `background-clip` 完结突变文字

运用 `background-clip` 给文字增加高光动画

`mask` 与文字