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>
相关推荐
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8506 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
涔溪7 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊9 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选10 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
代码的余温11 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心11 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范