vue聊天对话语音消息播放动态特效

vue2写法,vue3也能用,粘之即走:

示例:

javascript 复制代码
<template>
  <div class="voice-hidden">
    <div
      class="voice-play-chat"
      :class="[className, { 'animate-stop': !isPlaying }]"
    >
      <div class="center-box">
        <div class="box-1 box" :style="{'border-color':borderColor}"></div>
        <div class="box-2 box" :style="{'border-color':borderColor}"></div>
        <div class="box-3 box" :style="{'border-color':borderColor}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    className: {}, // 可传值 voice-play-custom(对话中发送本人查看样式),不传即为查看对方发送语音样式
    isPlaying: {}, // 音频是否正在播放(true: 显示动效; false: 关闭动效)
    borderColor: {
    	type: String,
    	default: "rgba(0, 0, 0, 0.8)",
   }, // 音频颜色
  },
};
</script>

<style lang="scss" scoped>
@keyframes top {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}
@keyframes middle {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
.voice-hidden {
  position: relative;
  width: 18px;
  height: 18px;
}
.voice-play-chat {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  overflow: hidden;
  transform: rotate(-45deg);
  .center-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .box {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.8);
  }
  .box-1 {
    border-width: 4px;
  }
  .box-2 {
    width: 20px;
    height: 20px;
    animation: middle 0.5s steps(1) alternate infinite;
  }
  .box-3 {
    width: 36px;
    height: 36px;
    animation: top 0.5s steps(1) alternate infinite;
  }
}
.voice-play-custom {
  position: absolute;
  top: 0;
  right: 10px;
  transform: rotate(-225deg);
}
.animate-stop {
  .box {
    animation: none;
  }
}
</style>
相关推荐
slim~3 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
F2E_Zhangmo4 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
weixin_584121434 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料4 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|5 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
蔗理苦6 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
quan26318 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb9 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
虫无涯9 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
NewChapter °9 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app