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>
相关推荐
Hilaku2 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
王王碎冰冰3 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼4 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
拜无忧5 小时前
html,svg,花海扩散效果
前端·css·svg
DevUI团队5 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好5 小时前
pinia从定义到运用
前端·vue.js
代码小学僧5 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜6 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥10 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js