在多边形上具有框阴影的脉冲动画

时间:2019-02-28 09:29:57

标签: html css animation box-shadow

我尝试在多边形上使用动画,所以我为阴影创建了一个CSS。 所以我通过CSS设置了动画。

public ICommand MoreButtonCommand { get; set; }
    .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);
      }
    }

您可以在这里演示我的演示。

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

0 个答案:

没有答案