关于css:奇思妙想-CSS-文字动画

39次阅读

共计 11959 个字符，预计需要花费 30 分钟才能阅读完成。

之前有些过两篇对于字体的文章，是对于如何定义字体的：

  • 你该晓得的字体 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>

</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 滤镜技巧与细节 一文中，介绍了利用滤镜实现的一种交融成果。

利用了 含糊滤镜叠加对比度滤镜产生的交融成果。

独自将两个滤镜拿进去，它们的作用别离是：

  1. filter: blur()：给图像设置高斯含糊成果。
  2. 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
发表至： css
2021-03-08
 0
关于css:样式工程化方案
关于css:css3线性渐变
关于css:CSS揭密背景和边框特殊技巧
关于css:DOM