Заполните шрифт потрясающим значком с загрузкой анимации

Question

Issue

Я пытаюсь использовать потрясающий значок шрифта 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

#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

Возможно, вам придется использовать обтравочные контуры, чтобы применить заливку только к значку. Вам также может понадобиться использовать значок, а не значок ...

Эта статья содержит некоторую интересную информацию, которая может помочь: https://css -tricks.com / masking-vs-clipping-use /