Импульсный эффект для md-icon-button - PullRequest
0 голосов
/ 11 декабря 2019

Я ищу импульсный эффект для моей кнопки md-icon, как показано в

materializecss

Я пытался использовать тот же css

   .pulse::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: inherit;
        border-radius: inherit;
        -webkit-transition: opacity .3s, -webkit-transform .3s;
        transition: opacity .3s, -webkit-transform .3s;
        transition: opacity .3s, transform .3s;
        transition: opacity .3s, transform .3s, -webkit-transform .3s;
        -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
        animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
        z-index: -1;
    }





@-webkit-keyframes pulse-animation {
    0% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
  }

  @keyframes pulse-animation {
    0% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
  }

Но на приведенном ниже коде это не помогло.

<md-button aria-label="Some Label" class="md-icon-button pulse" >
    <md-tooltip md-direction="top">Share</md-tooltip>
    <md-icon  >share</md-icon> 
</md-button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...