css技巧系列之(七) 按钮呼吸灯

实现效果：

实现源码：

  .box {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        width: 190px;
        height: 42px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background-color: #333;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        transition: 0.3s;
      }
      .btn:hover {
        background-color: #3185fa;
      }
      .btn:active {
        animation: btnEff 3s linear infinite;
      }
      @keyframes btnEff {
        0% {
          box-shadow: 0 0 2px #3185fa;
        }
        50% {
          box-shadow: 0 0 40px #3185fa;
        }
        100% {
          box-shadow: 0 0 2px #3185fa;
        }
      }

  <div class="box">
      <button class="btn">按住说话</button>
    </div>

如果这些效果对你有所帮助，麻烦点个关注，以下为本人公众号：