怎样实现微信语音聊天的动态语音图标？点击播放的时候，语音图标就要动态变化，再次点击可以切换动态和静态|animate css动画效果|语音播放动画

最新推荐文章于 2025-01-18 22:38:32 发布

南北极之间

最新推荐文章于 2025-01-18 22:38:32 发布

阅读量1.2k

点赞数 5

分类专栏：前端开发文章标签： vue.js 前端 javascript 动画 animate

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/140789709

版权

前端开发专栏收录该内容

601 篇文章

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 语音播放动画</title>
<!-- 引入 Vue 3 的 CDN -->
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
  .out {
    display: inline-block;
    position: relative;
  }

  /* 设置before和after伪元素来实现上下两个半圆 */
  .out::before,
  .out::after {
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    -webkit-clip-path: polygon(100% 0, 0 0, 0 50%);
    clip-path: polygon(100% 0, 0 0, 0 50%);
  }

  /* 设置after伪元素为下半部分的半圆 */
  .out::after {
    left: 0;
    top: 0;
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 50%);
    clip-path: polygon(100% 100%, 0 100%, 0 50%);
    background-color: #fff;
  }

  .loader {
    width: 60px; /* 设置 loader 的宽度 */
    height: 120px; /* 设置 loader 的高度 */
    border-radius: 0px 200px 200px 0px; /* 设置圆角半径 */
    -webkit-mask: repeating-radial-gradient(farthest-side at left, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
    background: radial-gradient(farthest-side at left, #333333 0 95%, #0000 0) left/0% 0% no-repeat #ddd; /* 修改颜色为 #333333 */
  }

  /* 设置动画效果的类 */
  .animate {
    animation: l10 2s infinite steps(6);
  }

  /* 定义动画效果的关键帧 */
  @keyframes l10 {
    100% {
      background-size: 120% 120%;
    }
  }
</style>
</head>
<body>
<!-- Vue 挂载点 -->
<div id="hello-vue" class="demo">
  <div class="out" id="audioControl" @click="togglePlayback">
    <!-- 动态绑定 animate 类，当 isPlaying 为 true 时，添加 animate 类 -->
    <div class="loader" :class="{ 'animate': isPlaying }"></div>
  </div>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      isPlaying: false // 初始化播放状态为 false
    };
  },
  methods: {
    // 切换播放状态的方法
    togglePlayback() {
      this.isPlaying = !this.isPlaying; // 反转 isPlaying 的值
    }
  }
}

// 创建 Vue 应用实例并挂载到 #hello-vue 元素上
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

解析：

引入 Vue 3 的 CDN：
- 使用 <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script> 引入 Vue 3 的 CDN 资源。
CSS 样式部分：
- .out 类定义了一个容器，使用伪元素 ::before 和 ::after 创建上下两个半圆，形成一个完整的圆形。
- .loader 类定义了播放动画的形状和样式。
- .animate 类添加动画效果，使用 @keyframes 定义动画关键帧。
HTML 结构部分：
- 在 #hello-vue 容器内，使用 @click 绑定 togglePlayback 方法，点击时切换播放状态。
- :class="{ 'animate': isPlaying }" 动态绑定 animate 类，根据 isPlaying 状态决定是否添加动画类。
JavaScript 部分：
- 定义 HelloVueApp 对象，包含 data 和 methods。
- data 返回一个包含 isPlaying 状态的对象，初始值为 false。
- togglePlayback 方法用于切换 isPlaying 的值。
- 使用 Vue.createApp 创建 Vue 应用实例，并挂载到 #hello-vue 元素上。