CSS & JS Effect – 脉冲 Pulse Play Button

效果

参考

Youtube – Create a pulsing animation with CSS

重点

在背后做一个一样大的 div border 然后 animation scale up.

HTML

<button>
  <i class="fa-solid fa-play"></i>
</button>

button 就是整个红色的区域, 中间的 play icon 是 fontawesome.

CSS Style

看注释理解

button {
  border-width: 0; // reset button default CSS

  // set button dimension
  display: inline-block;
  width: 152px;
  height: 152px;
  border-radius: 50%; // become 圆形

  background-color: hsl(7, 96%, 46%);
  color: white;

  // 居中 icon
  display: flex;
  justify-content: center;
  align-items: center;

  i {
    font-size: 2rem;
    padding-left: 2px; // 因为它是三角形, 越大它就偏离中心越多, 所以需要适当的调整居中
  }

  // 脉冲波 pulse
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: 0; // full size
    z-index: -1; // 藏在 icon 后面
    border: 4px solid hsl(7, 96%, 46%);
    border-radius: 50%;

    // animation infinite 脉冲波
    animation: pulse 2s infinite;
    @keyframes pulse {
      from {
        transform: scale(0.9); // 原理就是 scale up
        opacity: 1;
      }
      to {
        transform: scale(1.3);
        opacity: 0; // 配上 opacity 会有 fadeout 的 feel
      }
    }
  }
}

用 box-shadow 实现

用 box-shadow 也可以实现哦. 效果会有一点点不一样, 但是正常人是不会注意到的

代码超级简单哦

animation: pulse 4s infinite;
@keyframes pulse {
  from {
    box-shadow: 0 0 0 0 hsla(7, 96%, 46%, 0.4);
  }
  to {
    box-shadow: 0 0 0 20px hsla(7, 96%, 46%, 0);
  }
}