不多说，直接上代码：

.outDiv{
  width:30px;
  height:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outDiv .blingbling{
    border: 6px solid #73BF00;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scaleout 2.5s infinite ease-in-out;
    animation: scaleout 2.5s infinite ease-in-out;
  }
  @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
      -webkit-transform: scale(1.1);
      opacity: 0;
    }
  }
  @keyframes scaleout {
    0% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    } 100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
  }
CSS
Copy

只要把这个样式加到你的图标或

上，就有效果啦~

例如：

<div class="outDiv">
        <img src="../img/xinhao.png" />
        <div class="blingbling"></div>
      </div>
HTML
Copy

其中1.3s是闪烁的频率，宽高自己调整。

转自：： CSS实现图标闪烁效果 - 宁晓 - CSDN

打赏: 微信收款二维码微信, 支付宝收款二维码支付宝

标签: none

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。