css按钮播放特效，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js" type="application/javascript"></script>

<div id="app">
  <!-- 按钮 -->
  <div class="btn" :class="{ play: playState }">
    <svg class="circular" viewBox="0 0 50 50" v-show="playState">
        <circle class="path" cx="25" cy="25" r="24"></circle>
    </svg>
    <svg class="icon" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
      <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
    </svg>
  </div>
  
  <button id="start" @click="changePlayState">
    {{ playState? "重新播放":"开始" }}
  </button>
</div>

</body>

CSS

格式化

body {
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.btn {
  position: relative;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
}

.circular {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.path {
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #b200cd;
    stroke-linecap: round;
    fill: none;
}

.icon {
    margin: 16px;
    height: 50%;
    width: 50%;
    color: #000;
}

.play {
  animation: 1s bg-color-change 1s linear infinite;
  color: #fff;
}
.play .circular {
    animation: loading-rotate 2s linear infinite;
}
.play .path {
  animation: loading-dash 1.5s ease-in-out infinite;
}
.play .icon {
  animation: 1s icon-color-change 1s linear infinite;
}
@keyframes loading-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }

    to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}

@keyframes bg-color-change  {
  0% {
    background-color: #cd21c7;
  }
  to {
    background-color: #cd21c7;
  }
}


@keyframes icon-color-change  {
  0% {
    color: #fff;
  }
  to {
    color: #fff;
  }
}

格式化

const { createApp } = Vue
createApp({
  data() {
    return {
      playState: true
    }
  },
  methods: {
    changePlayState() {
      this.playState = !this.playState;
    }
  }
}).mount('#app')

预览

控制台