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>
相关推荐
拾光拾趣录2 分钟前
CSS高级技巧与实用伪类
前端·css
雲墨款哥5 分钟前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌9 分钟前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js
光影少年25 分钟前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
江城开朗的豌豆38 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02111 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
清幽竹客8 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua8 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8888 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js