Html 用加载动画填充字体图标 问题

我正在尝试使用字体很棒的图标

fas

并添加填充效果，现在我有了部分CSS，我可以看到正在加载的动画，但我无法让它填充到字体很棒的图标中。所以我基本上想做的就是把你能看到的填充效果放在字体图标里面

下面是问题的答案

目前，它是坐在下面的字体真棒图标。您可以在下面看到：

---

代码 因此，我的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>

---

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

---

本文提供了一些有趣的信息，可能会有所帮助：

您可以使用

混合模式：screen

为此，我将

I

和

fill

包装在一个div中，并设置

I{position:absolute}

。请看一下这本书

包装{高度：150px； 宽度：150px； 溢出：隐藏； 边框：1px实心； } #横幅{ 高度：150像素； 宽度：150px； } .填充{ 动画名称：fillAction； 动画迭代次数：1； 动画计时功能：立方贝塞尔（.2、.6、.8、.4）； 动画持续时间：4s； 动画填充模式：正向； 混合模式：屏幕； } #波形{ 动画名称：waveAction； 动画迭代次数：无限； 动画计时功能：线性； 动画持续时间：0.5s； 宽度：300px； 高度：150像素； 填充：#04ACFF； } @关键帧填充动作{ 0% { 转换：转换（0，150px）； } 100% { 变换：平移（0，-5px）； } } @动作关键帧{ 0% { 转换：转换（-150px，0）； } 100% { 变换：平移（0,0）； } } i{字体大小：147px；背景：#fff；} #包裹i{位置：绝对}

不幸的是，这并没有带来什么不同。如果有帮助的话，我可以在codepen中创建一个示例？看起来svg标记的内联宽度和高度是造成部分问题的原因，但是如果我删除它，动画就会变得很奇怪。我试图让它填充字体的内部，而不是在它上面。我不确定这对SVG来说是否更容易？啊，我明白你的意思了。您可以将该图标用作剪切遮罩，以便只有该图标是“填充”的。或者一个动画实用程序也可能会有所帮助。例如，greensock.js有一系列很酷的svg动画。我用叉子叉了你的笔，它在图标的顶部填充。。。我想我必须走SVG路线才能剪辑动画。太棒了！非常感谢你。

#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);
  }
}