如何使用 CSS 创建动画填充文本-之路教程

←如何使用 CSS 创建立体文字效果

如何使用 CSS 创建动画填充文本→

添加 CSS

使用 background-image 属性为元素指定背景图像。

我们选择值以及背景的颜色。

文本仍然是文本。
它可以是可搜索、可选择和可复制的。

使用 text-fill-color 属性。

其中我们需要使 text-fill-color 透明，以便背景图像可见。

放置 background-size 属性，它定义了背景图像的大小。
使用背景剪辑属性。

选择“text”值，这样背景就会被绘制在前景文本中。

背景剪辑：文本；仅适用于基于 Webkit 的浏览器（Google Chrome、Safari、Opera）。

为文本添加动画。

当然，这里我们需要 CSS @keyframes，它我们通过定义动画序列中关键帧（或者航点）的样式来指定动画期间特定时刻应该发生的事情。

如果你想让动画无休止地播放，你应该使用“infinite”值。
我们可以使用不同的 CSS 动画属性值，让动画更具创意。

.animated-text {
  background-image: -webkit-linear-gradient(DarkSalmon 50%, LightYellow 50%);
  background-size: 100% 50px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: stripes 2s linear infinite;
  animation: stripes 2s linear infinite;
  font-size: 100px;
}
@-webkit-keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}
@keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}

现在让我们把它们放在一起并尝试一些例子。

使用 background-image 属性的“linear-gradient”值创建动画填充文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated-text {
        background-image: -webkit-linear-gradient(DarkSalmon 50%, LightYellow 50%);
        background-size: 100% 50px;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-animation: stripes 2s linear infinite;
        animation: stripes 2s linear infinite;
        font-size: 100px;
      }
      @-webkit-keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
      @keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animated-text">
      Trust yourself!
    </div>
  </body>
</html>

我们可以选择 CSS background-image 属性的“URL”值并添加任何图像，而不是“linear-gradient”值。

使用 background-image 属性的“URL”值创建动画填充文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated-text {
        font-family: Impact;
        background-image: url("https://bureau.ru/var/files/img1532613761");
        background-size: 100% 50px;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-animation: stripes 2s linear infinite;
        animation: stripes 2s linear infinite;
        font-size: 100px;
      }
      @-webkit-keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animated-text">
      Trust yourself!
    </div>
  </body>
</html>

创建动画填充文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
      .text {
        fill: none;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-dasharray: 70 330;
        stroke-dashoffset: 0;
        -webkit-animation: stroke 6s infinite linear;
        animation: stroke 6s infinite linear;
      }
      .text:nth-child(5n + 1) {
        stroke: #F2385A;
        -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
      }
      .text:nth-child(5n + 2) {
        stroke: #F5A503;
        -webkit-animation-delay: -2.4s;
        animation-delay: -2.4s;
      }
      .text:nth-child(5n + 3) {
        stroke: #E9F1DF;
        -webkit-animation-delay: -3.6s;
        animation-delay: -3.6s;
      }
      .text:nth-child(5n + 4) {
        stroke: #56D9CD;
        -webkit-animation-delay: -4.8s;
        animation-delay: -4.8s;
      }
      .text:nth-child(5n + 5) {
        stroke: #3AA1BF;
        -webkit-animation-delay: -6s;
        animation-delay: -6s;
      }
      @-webkit-keyframes stroke {
        100% {
          stroke-dashoffset: -400;
        }
      }
      @keyframes stroke {
        100% {
          stroke-dashoffset: -400;
        }
      }
      /* Other styles */

      html,
      body {
        height: 100%;
      }
      body {
        background: #111;
        background-size: .2em 100%;
        font: 14.5em/1 Open Sans, Impact;
        text-transform: uppercase;
        margin: 0;
      }
      svg {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 600 300">
      <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="50%" dy=".35em">
          Text
        </text>
      </symbol>
      <!-- Duplicate symbols -->
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
    </svg>
  </body>
</html>

创建 HTML

设置 <div> 标签并给它一个类名“animated-text”

<div class="animated-text">
  Trust yourself!
</div>

如何使用 CSS 创建动画填充文本

你有没有用动画阴影或者渐变创建文本？
如果没有，这个片段是给你的。
它将创建此类文本并使更具创意。

创建此类文本的最简单方法是使用 CSS background-clip 属性，该属性指定 background-color 和 background-image 应该离元素多远。

让我们一起尝试创建一个。

日期：2020-06-02 22:15:03 来源：oir作者：oir