用加载动画填充字体真棒图标

Question

问题

我正在尝试使用字体超棒的图标fas fa-cannabis并添加填充效果，现在我将CSS的一部分放下了，可以看到加载的动画，但是无法将其填充到字体内很棒的图标。因此，我基本上想要做的就是在字体真棒图标的下方看到填充效果。

这是问题的CodePen

此刻，它位于字体真棒图标的下面。您可以在下面看到：

---

代码

所以我的HTML如下：

<i class="fas fa-cannabis" id="banner">
  <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
  </div>
</i>

使用以下CSS创建填充效果：

#banner {
  width: 150px;
  height: 150px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
#banner .fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width:300px;
  height: 150px;
  fill: #04ACFF;
}
@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}
@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

Answer 1

您可以使用mix-blend-mode:screen;，为此，我将i和fill都包装在div中，并设置了i{position:absolute}。请看看codepen demo

#wrap{height: 150px;
  width:150px;
  overflow: hidden;
  border:1px solid;
}
#banner {
  height: 150px;
  width:150px;

}
.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
  mix-blend-mode:screen;
}
#waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width:300px;
  height: 150px;
  fill: #04ACFF;

}
@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}
@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
i{font-size:147px; background:#fff;}


#wrap i{position:absolute}

<div id="wrap">
<i class="fas fa-cannabis" id="banner"></i>
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
  </div>
</div>

Answer 2

您可能需要使用剪切路径将填充仅应用于图标。您可能还需要使用svg而不是图标...

本文提供了一些有趣的信息，可能会有所帮助：https://css-tricks.com/masking-vs-clipping-use/