Блог

Главная - Вопросы по программированию - Заливка шрифта — потрясающая иконка только с помощью CSS

Заливка шрифта — потрясающая иконка только с помощью CSS

#html #css #animation #svg #font-awesome

#HTML #css #Анимация #svg #шрифт-потрясающий

Вопрос:

Я хочу добавить анимацию к своему шрифту — потрясающая иконка в виде сердца, я хочу иметь эффект волны при наведении курсора мыши и щелчке.

И он должен быть пустым, иначе не черным, как far fa-heart . Но я не знаю как, и я занимался этим часами

У меня есть это на данный момент

 .plop{
      height: 200px;
  }

#wrap{
    height: 25px;
    width: 25px;
    overflow: hidden;
    border:0px;
}
  
#banner {
        height: 25px;
        width: 25px;
    }
    
.fill {
        animation-name: fillAction;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(.2, .6, .8, .4);
        animation-duration: 3s;
        animation-fill-mode: forwards;
        mix-blend-mode:screen;
    }
    
#waveShape{
        animation-name: waveAction;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 2s;
        width: 25px;
        height: 25px;
        fill: #04ACFF;
    }

#wrap i{
    position: absolute;
    font-size:25px; 
    background:#fff;
    }

  @keyframes fillAction {
    0% {
      transform: translate(0, 25px);
    }
    100% {
      transform: translate(0, -25px);
    }
  }
  @keyframes waveAction {
    0% {
      transform: translate(-45px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  } 
 <script src="https://kit.fontawesome.com/8ac5de0510.js" crossorigin="anonymous"></script>
<section class="plop">
    <div id="wrap">
                <i class="fas fa-heart" 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="50px" viewBox="0 0 50 50" xml:space="preserve">
              <path id="waveShape" d="M 300 300 V 2.5 c 0 0 0 -0.5 -1 0.5 c 0.1 2.6 
              -28 6 -40.5 -2.4 c -3.5 -1.6 -40.6 2.4 -40.6 2.4 c -12.3 1.1 -23.9 5 
              -31.9 6 c -2 -0.1 -27.1 2.4 -32 -1.9 c 0 0 -33.1 -7.7 -40.1 -5.7 c -18.1 
              10.4 -40.8 2.4 -40.8 2.4 c -7.3 -1 -19.1 -2.8 -32.1 5.2 c -7 4 -20 -1 
              -32.2 -1.9 c 0 0 -3.1 -0.3 -8.1 -0.7 V 300 H 300 z"/>
            </svg>
          </div>
        </div>
</section>

https://jsfiddle.net/Zlastaneur/x24konag/

Комментарии:

1. вопрос не ясен, если вы хотите, чтобы значок был пустым перед наведением курсора, тогда color: transparent будет работать. Пожалуйста, предоставьте подробную информацию о том, что вы хотите сделать, чтобы мы могли вам в этом помочь.

2. @RaashidDinDar к сожалению, я не думаю, что color transparent будет работать, потому что анимация зависит от режима смешивания: экран, поэтому там должны быть некоторые изменения.

3. Когда вы говорите, что сердце должно быть пустым для начала, нормально ли, если оно белое, а не прозрачное?

4. итак, вы хотите добавить анимацию к значку при наведении курсора мыши. Тогда было бы лучше добавить стиль наведения на значок, например #banner: hover { Свойства CSS, включая анимацию здесь }. проверьте псевдо-свойство наведения

5. Просто чтобы отметить, что данный код дает другой эффект при использовании с более поздними версиями Fontawesome (они используют SVG для отображения значков).