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

vue2写法,vue3也能用,粘之即走:
示例: 在这里插入图片描述

<template><div class="voice-hidden"><divclass="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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 绘图工具详解:使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

目录 数据可视化1.使用 matplotlib 库matplotlib 库 2 .使用 seaborn 库seaborn 库 3 .使用 pyecharts库pyecharts库 注意1. 确保安装了所有必要的库2. 检查Jupyter Notebook的版本3. 使用render()方法保存为HTML文件4. 使用IFrame在Notebook中显示HTML文件5. 检查是否有其他输…

【链表】力扣 141. 环形链表

一、题目 二、思路 龟兔进行赛跑 龟的速度是 1&#xff0c;兔的速度是 2龟兔从同一起点出发&#xff0c;若 龟追上兔 则说明 有环 存在&#xff1b;若追不上&#xff0c;则说明无环。 三、代码 /*** Definition for singly-linked list.* class ListNode {* int val;* …

Spring中使用Async进行异步功能开发实战-以大文件上传为例

目录 前言 一、场景再现 1、Event的同步机制 二、性能优化 1、异步支持配置 2、自定义处理线程池扩展 3、将线程池配置类绑定到异步方法 三、总结 前言 在之前的博客中&#xff0c;曾将讲了在SpringBoot中如何使用Event来进行大文件上传的解耦&#xff0c;原文地址&am…

PyTorch 深度学习框架简介:灵活、高效的 AI 开发工具

PyTorch 深度学习框架简介&#xff1a;灵活、高效的 AI 开发工具 PyTorch 作为一个深度学习框架&#xff0c;以其灵活性、可扩展性和高效性广受欢迎。无论是在研究领域进行创新实验&#xff0c;还是在工业界构建生产级的深度学习模型&#xff0c;PyTorch 都能提供所需的工具和…

Qt 2D绘图之五:图形视图框架的结构、坐标系统和框架间的事件处理与传播

参考文章链接: Qt 2D绘图之五:图形视图框架的结构和坐标系统 Qt 2D绘图之六:图形视图框架的事件处理与传播 图形视图框架的结构 在前面讲的基本绘图中,我们可以自己绘制各种图形,并且控制它们。但是,如果需要同时绘制很多个相同或不同的图形,并且要控制它们的移动、…

Qt开发技巧(二十四)滚动部件的滑动问题,Qt设置时区问题,自定义窗体样式不生效问题,编码格式问题,给按钮左边加个图,最小化后的卡死假象

继续记录一些Qt开发中的技巧操作&#xff1a; 1.滚动部件的滑动问题 再Linux嵌入式设备上&#xff0c;有时候一个页面的子部件太多&#xff0c;一屏放不下是需要做页面滑动&#xff0c;可以使用“QScrollArea”控件&#xff0c;拖来一个“QScrollArea”控件&#xff0c;将子部件…

基于yolov4深度学习网络的排队人数统计系统matlab仿真,带GUI界面

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论知识概要 在现代社会…

计算机毕业设计项目基于SSM闪光点映像摄影工作室预约系统

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

人工智能大模型培训讲师叶梓:Llama Factory 微调模型实战分享提纲

LLaMA-Factory ——一个高效、易用的大模型训练与微调平台。它支持多种预训练模型&#xff0c;并且提供了丰富的训练算法&#xff0c;包括增量预训练、多模态指令监督微调、奖励模型训练等。 LLaMA-Factory的优势在于其简单易用的界面和强大的功能。用户可以在不编写任何代码的…

Creating Server TCP listening socket *:6379: bind: No error

启动redis报错&#xff1a;Creating Server TCP listening socket *:6379: bind: No error 解决方案&#xff1a; 1、直接在命令行中输入 redis-cli.exe 2、输入shutdown&#xff0c;关闭 3、输exit&#xff0c;退出 4、重新输入 redis-server.exe redis.windows.conf&…

qt QSettings详解

1、概述 QSettings是Qt框架中用于应用程序配置和持久化数据的一个类。它提供了一种便捷的方式来存储和读取应用程序的设置&#xff0c;如窗口大小、位置、用户偏好等。QSettings支持多种存储格式&#xff0c;包括INI文件、Windows注册表&#xff08;仅限Windows平台&#xff0…

Excel中日期格式“年月日 时间”修改为“年月日”

需求&#xff1a; 将Excel中“yyyy-mm-dd hh:mm:ss”格式的时间转换为“yyyy-mm-dd”格式的时间&#xff0c;选中转换后的时间时编辑栏中依然会显示“yyyy-mm-dd hh:mm:ss”格式。 方法一、在原数据列进行转换&#xff1a; 1、选中需要转换的数据列&#xff0c;右键--【设置…

解决Clang 18+不能链接GCC14编译的库的问题

前面笔者的博文MSYS2 MinGW64使用Protobuf新版本踩坑&#xff0c;有提到使用最新的Clang 19.1.4版本在MinGW下无法正常链接使用了Protobuf 28.3的项目&#xff0c;因为MinGW下的项目默认都是使用GCC来编译的&#xff0c;所以如果开发者使用Clang编译器&#xff0c;必然会出现链…

DHCP和DNS

DHCP&#xff08;动态主机配置协议&#xff09;和DNS&#xff08;域名系统&#xff09;是计算机网络中两个重要的协议&#xff0c;它们在网络的管理和使用中发挥着关键作用。 DHCP&#xff08;动态主机配置协议&#xff09; 基本功能 自动分配IP地址&#xff1a;DHCP允许网…

Unity 设计模式-策略模式(Strategy Pattern)详解

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;定义了一系列算法&#xff0c;并将每种算法封装到独立的类中&#xff0c;使得它们可以互相替换。策略模式让算法可以在不影响客户端的情况下独立变化&#xff0c;客户端通过与这些策略对象进…

C++远程调试vscode配置

C++远程调试vscode配置 一、环境说明二、安装gdbserver2.1 安装方案一2.2 安装方案二源码安装三、VSCode配置gdb远程调试一、环境说明 目标主机:ubuntu 22.04.02 -server(x86_64) 远程调试的主机。 宿主机:ubuntu 22.04.05 -desktop (x86_64) 自己控制的主机。 二、安装g…

【Vue】Scoped、组件间通信、Props检验

目录 Scoped 作用 *原理 组件通信 前置知识 什么是组件通信 为什么需要组件通信 如何进行组件通信 如何辨别两个组件的关系 父子组件通信 父传子 子传父 非父子组件通信 祖先传后代 语法 任意两个组件通信 步骤 Props校验 props是什么 作用 语法 组件的…

vue 一行显示的动态消息

动态消息上翻显示 效果图 特点&#xff1a; 重复的信息&#xff0c;只显示一次全部信息显示完后&#xff0c;只在轮播最后一个消息队列若最后一个消息队列只有一条信息&#xff0c;则停止轮播&#xff0c;不轮播新的消息队列进入后&#xff0c;触发新的轮播 <template&g…

使用Unity脚本模拟绳索、布料(碰撞)

效果演示&#xff1a; 脚本如下&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;namespace PhysicsLab {public class RopeSolver : MonoBehaviour {public Transform ParticlePrefab;public int Count 3;public int Space 1;…

基于Matlab BP神经网络的电力负荷预测模型研究与实现

随着电力系统的复杂性和规模的不断增长&#xff0c;准确的电力负荷预测对于电网的稳定性和运行效率至关重要。传统的负荷预测方法依赖于历史数据和简单的统计模型&#xff0c;但这些方法在处理非线性和动态变化的负荷数据时&#xff0c;表现出较大的局限性。近年来&#xff0c;…