Импульсная анимация с box-shadow на многоугольнике - PullRequest
Новая
       33

Импульсная анимация с box-shadow на многоугольнике

0 голосов
/ 28 февраля 2019

Я пытаюсь использовать анимацию на многоугольнике, поэтому я создаю CSS для тени.Поэтому я настроил анимацию через CSS. 

    .imp-shape-poly {
      box-shadow: 0 0 0 rgba(204,169,44, 0.4);
      animation: pulse 2s infinite;
    }
    
    .imp-shape-poly:hover {
      animation: none;
    }
    
    @-webkit-keyframes pulse {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
      }
      70% {
          -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      }
      100% {
          -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      }
    }
    @keyframes pulse {
      0% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
      }
      70% {
          -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
          box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      }
      100% {
          -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
          box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      }
    }
<svg class="hs-poly-svg" viewBox="0 0 2200 950" preserveAspectRatio="none"><polygon class="imp-shape imp-shape-poly" style="fill: rgba(84, 175, 223, 0.4);stroke: rgba(255, 255, 255, 0.75);stroke-width: 0px;stroke-dasharray: 0;stroke-linecap: round;" data-index="0" id="poly-3942" data-shape-title="tag" points="590.634,345.6535689655172 686.0944444444444,379.3739827586206 805.4200000000001,380.77899999999994 690.4335555555556,340.03349999999995 "></polygon><polygon class="imp-shape imp-shape-poly" style="fill: rgba(84, 175, 223, 0.4);stroke: rgba(255, 255, 255, 0.75);stroke-width: 0px;stroke-dasharray: 0;stroke-linecap: round;" data-index="1" id="poly-9033" data-shape-title="liest" points="551.606,438.7057777777778 580.6370810810811,435.48 647.9120631205234,464.64292129912565 668.0686486486486,481.91705555555563 670.956,799.992888888889 651.601945945946,812.896 564.5087027027026,722.5742222222221 "></polygon><polygon class="imp-shape imp-shape-poly" style="fill: rgba(84, 175, 223, 0.4);stroke: rgba(255, 255, 255, 0.75);stroke-width: 0px;stroke-dasharray: 0;stroke-linecap: round;" data-index="2" id="poly-2644" data-shape-title="poly-2644" points="1007.6357892063631,512.9048582089553 1005.5980000000001,612.3795 1279.3647089173871,597.1110149253732 1281.632,497.2015 "></polygon><polygon class="imp-shape imp-shape-poly" style="fill: rgba(84, 175, 223, 0.4);stroke: rgba(255, 255, 255, 0.75);stroke-width: 0px;stroke-dasharray: 0;stroke-linecap: round;" data-index="3" id="poly-7367" data-shape-title="poly-7367" points="1344.4066308252995,653.2295 1488.718,637.1006111111112 1472.5889807756023,593.9780000000001 1321.914,606.0271236844445 "></polygon></svg>

Вы можете выложить здесь мое демо.

https://codepen.io/anon/pen/BboWpW

...