当前位置: 首页 > news >正文

通过 CSS 的样式实现语音发送动效类似声音震动的效果

 实现效果:一般用于发送语音的时候,出现动画效果

 

 

//模版部分
<view  class="musical-scale"><view class="scale"><view class="em" v-for="(item,index) in 15" :key="index"></view></view>
</view>//css样式+动画
.musical-scale {position: absolute;bottom: 50%;width: 80%;height: 96rpx;background-color: #E2F0FF;border-radius: 48rpx;z-index: 1;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;.scale {width: 65%;height: 56rpx;display: flex;align-items: center;justify-content: space-between;.em {display: block;background: #007AFF;width: 4rpx;height: 10%;float: left;&:last-child {margin-right: 0px;}&:nth-child(1),&:nth-child(15) {animation: load 2.5s 1.4s infinite linear;}&:nth-child(2),&:nth-child(14) {animation: load 2.5s 1.2s infinite linear;}&:nth-child(3),&:nth-child(13) {animation: load 2.5s 1s infinite linear;}&:nth-child(4),&:nth-child(12) {animation: load 2.5s 0.8s infinite linear;}&:nth-child(5),&:nth-child(11) {animation: load 2.5s 0.6s infinite linear;}&:nth-child(6),&:nth-child(10) {animation: load 2.5s 0.4s infinite linear;}&:nth-child(7),&:nth-child(9) {animation: load 2.5s 0.2s infinite linear;}&:nth-child(8) {animation: load 2.5s 0s infinite linear;}@keyframes load {0% {height: 10%;}50% {height: 100%;}100% {height: 10%;}}}}}

在模板中,该区域具有 musical-scale 类,以设置其样式属性。在该区域内部,有一个 scale 类的容器,容器内部通过 v-for 遍历生成了15个 em 元素,每个 em 元素都会应用动画效果。通过 @keyframes 定义的 load 动画,控制了 em 元素的高度从10%到100%再到10%的变化过程,形成了录音的动画效果。

总结起来,这段代码实现了一个简单的录音动画效果,通过 CSS 的样式定义和动画关键帧的设置,使得一组垂直排列的短竖条在高度上呈现周期性的变化,形成了类似声音震动的效果。

相关文章:

通过 CSS 的样式实现语音发送动效类似声音震动的效果

实现效果&#xff1a;一般用于发送语音的时候&#xff0c;出现动画效果 //模版部分 <view class"musical-scale"><view class"scale"><view class"em" v-for"(item,index) in 15" :key"index"></view…...

【C#】.Net Framework框架使用JWT

2023年&#xff0c;第31周&#xff0c;第2篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 本篇文章主要简单讲讲&#xff0c;.Net Framework框架下使用JWT的代码例子&#xff0c;以及他们的基本概念。 2002年微软发布了.net framewo…...

SQL高级教程第三章

SQL CREATE DATABASE 语句 CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库。 SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL CREATE DATABASE 实例 现在我们希望创建一个名为 "my_db" 的数据库。 我们使用下面的 CREATE DATABASE 语句&…...

vue 3.0 下载本地pdf文件

使用a标签,把pdf文件放到public文件夹下面 <el-form label-width"160px"> <el-form-item label"使用手册"> <div class"form-item-static"> <a href"/使用手册.pdf" target"_blank" class"link&q…...

平板用的触控笔什么牌子好?ipad第三方电容笔推荐

随着技术的发展&#xff0c;出现了各种各样的平板电容笔。一支好的电容笔&#xff0c;不但可以极大地提升我们的工作效率&#xff0c;还可以极大地提升我们的学习效果。平替的电容笔&#xff0c;无论是在技术方面&#xff0c;还是在质量方面&#xff0c;都还有很大的提升空间&a…...

【Unity2D】相机移动以及设置相机边界

添加相机 添加相机时&#xff0c;首先需要在unity中添加 Cinemachine 包 第一次使用这个包时&#xff0c;需要在Package Manager中搜索并安装 安装Camera Mechine包后&#xff0c;添加2D Camera 设置跟随对象为Ruby &#xff08;从Hierarchy中将Ruby拖动到Follow中&#xff0…...

和chatgpt学架构04-路由开发

目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转&#xff0c;其中路由配置是必不可少的&#xff0c;我们在做开发的时候&#xff0c;先需要了解知识点&…...

Spring MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】

目录 一、单个控制器异常处理 1.1 控制器方法 1.2 编写出错页面 1.3 测试结果 二、全局异常处理 2.1 一个有异常的控制器类 2.2 全局异常处理器类 2.3 测试结果 三、自定义异常处理器 3.1 自定义异常处理器 3.2 测试结果 往期专栏&文章相关导读 1. Maven系列…...

使用3ds Max粒子系统创建飞天箭雨特效场景

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 设置箭头 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我使用多边形建模技术制作了一个简单的箭头&#xff0c;我将 在教程中使用。.max您可以从 下载部分。 箭头.max 步骤 3 将此箭头重命名为静态…...

【朴素贝叶斯实例】

朴素贝叶斯对新闻进行分类 朴素贝叶斯算法是一种常用的文本分类方法&#xff0c;特别适用于自然语言处理任务&#xff0c;如新闻分类。在这篇博客中&#xff0c;我们将使用Python的scikit-learn库来实现朴素贝叶斯算法&#xff0c;并将其应用于新闻分类任务。 数据准备 首先…...

MPAS跨尺度、可变分辨率模式

跨尺度预测模式&#xff08;The Model for Prediction Across Scales - MPAS&#xff09;是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发&#xff0c;其由3个部分组成&#xff0c;分别称为 MPAS-A&#xff08;大气模型&#xff09;、MPAS-O&#xff08;海洋模型&…...

微信小程序对接SSE接口记录

微信小程序对接SSE接口记录 需求&#xff1a;公司项目对接gpt&#xff0c;gpt产生的结果是分段返回&#xff0c;所以要求在产生结果时&#xff0c;有打字机的效果。原本是由定时器调用&#xff0c;后来优化改为服务端使用SSE接口。小程序使用起来比较方便&#xff0c;但是要求…...

Ngrok 的绝佳替代品,内网穿透神器 Serveo

什么是 Serveo Serveo 是一个免费的内网穿透服务&#xff0c;Serveo 可以将本地计算机暴露在互联网上&#xff0c;官方声称其为 Ngrok 的绝佳替代品。 Serveo 其最大优点是使用现有的 SSH 客户端&#xff0c;无需安装任何客户端软件即可完成端口转发。 Serveo 工作原理很简单…...

网络知识点之-路由

路由&#xff08;routing&#xff09;是指分组从源到目的地时&#xff0c;决定端到端路径的网络范围的进程。路由工作在OSI参考模型第三层——网络层的数据包转发设备。路由器通过转发数据包来实现网络互连。虽然路由器可以支持多种协议&#xff08;如TCP/IP、IPX/SPX、AppleTa…...

input 框如何移动光标,设置光标位置?

获取 input 光标位置 const inputDom document.getElementById("input") const selectionStart inputDom.selectionStart设置 input 光标 inputDom.focus() // focus() 异步&#xff0c;所以加了 setTimeout setTimeout(() > {const nextSelection selection…...

linux内核系统调用学习5:SYSCALL_DEFINE<0-6>

系统调用最大参数是6&#xff0c;由下面这个宏定义&#xff0c;位于文件include\linux\syscalls.h #define SYSCALL_DEFINE_MAXARGS 6 SYSCALL_DEFINE0(fork) fork&#xff1a;系统调用名。 SYSCALL_DEFINE1(set_tid_address, int __user *, tidptr) set_tid_address&#x…...

maven镜像仓库配置(多镜像自动切换)

大家在使用IDEA的时候会遇到这样的一个问题&#xff0c;就是在下载源代码和资源文档的时候&#xff0c;有些镜像仓库里面没有源代码和资源文档&#xff0c;然后会导致下载失败。 这时候就需要多个镜像仓库的地址了。 附上我自己的配置文件&#xff1a; <mirrors><!--…...

ChatGPT在智能监控和安防系统中的应用如何?

ChatGPT在智能监控和安防系统中有着广泛的应用潜力。智能监控和安防系统是利用人工智能和计算机视觉技术来实现对环境的实时监控和安全保障的系统。ChatGPT作为一种通用的预训练语言模型&#xff0c;可以在智能监控和安防系统中发挥以下作用&#xff1a; 1. **智能视频监控**&…...

【Spring Boot Admin】介绍以及使用

介绍 概述 Spring Boot Admin是一个监控工具&#xff0c;旨在以一种漂亮且易于访问的方式可视化Spring Boot Actuators提供的信息。 主要功能点 显示应用程序的监控状态应用程序上下线监控查看 JVM&#xff0c;线程信息可视化的查看日志以及下载日志文件动态切换日志级别Http…...

本地私有仓库部署、docker--harbor私有仓库部署和管理

部署本地私有仓库 拉取镜像 修改daemon.json配置文件 重启docker服务 创建容器 为镜像打标签 上传镜像 查看私有仓库 其他主机拉取私有仓库镜像 Docker--harbor私有仓库 &#xff08;1&#xff09;什么是Harbor Harbor 是 VMware 公司开源的企业级 Docker Registry 项目…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...