Question

我正在尝试将linear-gradient的{{1}}从0％设为{0-100}％。

这是我的CSS，但不幸的是，它不是在5秒后改变百分比的百分比之间的动画：

background-clip

请参阅JSFiddle

Answer 1

您无法为background-image制作动画。相反，您可以设置background-size动画以使渐变填充100％的高度：

＆＃13;

.train {
  font-size:35px;
  font-weight:900;
  animation: progress-bar 5s infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #bc2122;
  background-image: linear-gradient(to top, #67A062 0%, #67A062 60%, #bc2122 60%, #bc2122 100%);
  background-size: 100% 0%;
  background-position:bottom;
  background-repeat: no-repeat;
}

@keyframes progress-bar {
  from {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 0%;
  }
  to {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 100%;
  }
}

;

＆＃13;

<div class="train">
Text
</div>

＆＃13;

Answer 2

您最好的选择是使用SVG。您可以为文本填充渐变设置动画，动画像丝绸一样平滑，并且它将比您用来设置该图标的background-clip:text具有更好的浏览器支持。

＆＃13;

/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: url(#gr-radial);
}

/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #222;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

＆＃13;

<svg viewBox="0 0 600 300">

  <!-- Gradient -->
  <radialGradient id="gr-radial"
                  cx="50%" cy="50%" r="70%"
                  >
    <!-- Animation for colors of stop-color -->
    <stop stop-color="#FFF" offset="0">
      <animate attributeName="stop-color" 
               values="#bc2122;#67A062;#bc2122;"
               dur="5s" repeatCount="indefinite" />
    </stop>
    <stop stop-color="rgba(55,55,55,0)" offset="100%"/>
  </radialGradient>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text"
        >
    Text
  </text>
</svg>

＆＃13;

我对SVG的理解目前非常有限（正在研究;）），所以这是一个明显的复制粘贴，但我认为这有助于展示这个想法，并花一点时间阅读规范你可以将它用于你的图标;）

如何为背景剪辑的线性渐变设置动画

2 个答案: