css系列:音频播放效果-波纹律动

介绍

语音播放的律动效果,通俗来说就是一个带动画的特殊样式的进度条,播放的部分带有上下律动的动画,未播放的部分是普通的灰色竖状条。

实现中夹带了less变量、继承和循环遍历,可以顺带学习一下。

结果展示

大致效果如图所示,样式需要改下,动画效果bar中的上边距调整下即可。

代码

<template><div class="ripple-container"><div class="blue-ripple"><template v-for="(item, index) in rippleList"><!-- if判断是判断当前进度来展示播放还是未播放 --><div v-if="index >= Math.floor(rate * rippleList.length)" :key="index" :style="{ height: item + '%' }"></div><span v-else :key="index"></span></template></div></div>
</template><script>
export default {props: {// 当前进度,传入0.4这种数字,进度需要从0逐渐增长,直接传入一个比较大的进度只会出现空白一段的现象rate: {type: Number,default: 0.4,},},data() {return {rippleList: [40, 20, 40, 50, 70, 50, 20, 40, 30, 20, 30, 50, 100, 60, 20, 40, 30, 20, 30, 40, 70, 40, 20, 40, 40, 50, 70, 50,20, 40, 30, 20, 30, 50, 100, 60, 20,],};},
};
</script><style lang="less" scoped>
.ripple-container {.blue-ripple {width: 100%;height: 48px;display: flex;// 纵向居中align-items: center;// less变量,主题色@color: #3370ff;// 给span标签增加样式,不设置高度是因为高度在动画中// span标签用于展示波纹律动效果span {width: 3px;border-radius: 18px;margin-right: 4px;}// div继承span标签的样式,用来统一波纹条样式// div标签用于展示非正在播放的部分div {// less继承需要将所有层级的类名都写上&:extend(.ripple-container .blue-ripple span);background: rgba(0, 0, 0, 0.16);}@keyframes bar {0% {background: @color;margin-top: 5%;height: 10%;}50% {background: @color;margin-top: 0;height: 100%;}100% {background: @color;margin-top: 5%;height: 10%;}}// less循环遍历生成span的样式// 这里使用的是less的when语法,当@i小于等于@n时执行.generate-span(@n,@i:1) when(@i <= @n) {span:nth-child(@{i}) {// 这个本来是想配合.generate-keyframes使用的,但是less似乎不支持遍历生成@keyframes的名字// @name: ` "bar@{i}" `;animation: bar 2s 0.2s * @i infinite linear;}// 递归调用,生成下一个span的样式,这里when是判断是否结束的,这个递归调用用来形成遍历.generate-span(@n, @i + 1);}// 循环遍历生成keyframes,生成有问题.generate-keyframes(@n,@i:1) when(@i <= @n) {// 用less变量来解决不能直接使用@i问题@keyfaramesName: ` "bar@{i}" `;// 似乎不支持动态生成keyframes的名称@keyframes @keyfaramesName {0% {background: @color;margin-top: 5%;height: 10;}50% {background: @color;margin-top: 0;height: 100;}100% {background: @color;margin-top: 5%;height: 10;}}.generate-keyframes(@n, @i + 1);}// 调用循环遍历.generate-span(100);// .generate-keyframes(100);}
}
</style>

结语

整体效果还可以,动态生成keyframes名称似乎不支持,如有大神了解,烦请指教。

对文章有好的建议,欢迎提出。讲解不细之处,欢迎指出。

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

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

相关文章

防火墙安全管理

大多数企业通过互联网传输关键数据&#xff0c;因此部署适当的网络安全措施是必要的&#xff0c;拥有足够的网络安全措施可以为网络基础设施提供大量的保护&#xff0c;防止黑客、恶意用户、病毒攻击和数据盗窃。 网络安全结合了多层保护来限制恶意用户&#xff0c;并仅允许授…

使用QT制作QQ登录界面

mywidget.cpp #include "mywidget.h"Mywidget::Mywidget(QWidget *parent): QWidget(parent) {/********制作一个QQ登录界面*********************/this->resize(535,415);//设置登录窗口大小this->setFixedSize(535,415);//固定窗口大小this->setWindowTi…

Spring Boot 的启动原理、Spring Boot 自动配置原理

Spring Boot启动原理包含自动装配原理。 Spring Boot 的启动原理&#xff1a; 1. 入口类与 SpringApplication 初始化&#xff1a; 应用程序通常从一个带有 SpringBootApplication 注解的主类开始&#xff0c;这个注解是一个组合注解&#xff0c;包含了 SpringBootConfigurat…

【学习笔记8】阅读StyleID论文源码

论文【链接】 源码【链接】 一、DDIM eta ddim_step表示执行几轮去噪迭代&#xff0c;eta表示DDPM和DDIM的插值系数。当eta0时&#xff0c;为DDPM&#xff1b;当eta≠0时&#xff0c;为DDIM。 参考 DDIM 简明讲解与 PyTorch 实现&#xff1a;加速扩散模型采样的通用方法 【s…

2024.06.13

这两天一直在准备面试和进行面试啊&#xff0c; 从昨天面七牛云&#xff0c;到今天面百度和蔚来&#xff0c;学到了很多不只是知识上的内容&#xff0c;详情可看&#xff1a;我的牛客

【ARMv8/ARMv9 硬件加速系列 3 -- SVE 硬件加速向量运算 1】

文章目录 SVE 使用介绍SVE 特点SVE2 特点 SVE 寄存器扩展的向量寄存器可扩展的谓词寄存器.d 与 .b 后缀的区别举例介绍使用 .d 后缀进行64位元素操作使用 .b 后缀进行8位元素操作 ptrue 指令小结 FFR 寄存器 SVE 使用介绍 前面文章:【ARMv8/ARMv9 硬件加速系列 1 – SVE | NEO…

git下载项目登录账号或密码填写错误不弹出登录框

错误描述 登录账号或密码填写错误不弹出登录框 二、解决办法 控制面板\用户帐户\凭据管理器 找到对应的登录地址进行更新或者删除 再次拉取或者更新就会提示输入登录信息

影响数字本振信噪比的因素

2048 点 -66 4096 点-72 8192 点-77 16384 点-84

FineBI开发中的一些数据处理方法

在这里记录在FineBI开发中的遇到的一些数据处理方法。 1、获取一星期中的首日日期 假设电商数据分析场景中有张订单表&#xff0c;其中有一列为订单日期(order_create_dt)&#xff0c;如果需要统计订单金额周同比&#xff0c;一般我们都需要构建一张日期维度表&#xff08;如…

SAP PP学习笔记21 - 计划策略的Customize:策略组 > 策略 > 需求类型 > 需求类(消费区分,计划区分)

上面几章讲了MTS&#xff0c;MTO&#xff0c;ATO的计划策略。 本章来讲一下它的后台 Customize。 1&#xff0c;Customizeing&#xff1a;Planned Indep.Reqmts Management 这是配置计划策略的整个过程&#xff1a; - Requirements Type / Class 需求类型 / 需求类 - Plann…

VUE之重定向redirect

VUE之路由和重定向redirect 这个小知识点是在学习做项目的时候遇到的一个问题&#xff0c;借鉴了一个他人的项目&#xff0c;是一个酒店管理系统&#xff0c;拿到源码之后导到我的vscode里。 参考链接 导的过程比较顺利&#xff0c;正常安装&#xff0c;加依赖&#xff0c;没有…

SIM卡 移动、联通、电信对比

中国移动、联通、电信优势劣势分析 移动和联通采用GSM终端&#xff0c;电信采用CDMA终端(码分多址)&#xff0c;上网速度快&#xff0c;保密性好联通也有CDMA关于GSM、CDMA、TDMA、 TD-SCDMA、WCDMA之间的各种纠结 中国联通&#xff1a;网络安全的“攻”与“防” 联通保密性…

java操作数据库语法

1 新建数据库 1.1 新建数据库 1 启动mysql数据库 2 新建数据库 1.2 mysql数据库语法 1 选择数据库 use java_demo1 2 移除数据库 drop database java_web1 3 创建表 CREATE TABLE user (id int(11) PRIMARY KEY AUTO_INCREMENT,name varchar(255) NOT NULL,age int(11)…

【python】通行网格地图四叉树化 (leeccode 427)

【python】通行网格地图四叉树化 受到Leecode 427题的启发&#xff0c;427. 建立四叉树 想将由0和1组成的网格地图绘制为四叉树地图&#xff0c;0表示可通行网格&#xff0c;1表示不可通行网格。 import matplotlib.pyplot as plt import matplotlib.patches as patches …

【数学建模】MATLAB入门教程:插值与拟合(下)

前言 插值与拟合在数据处理和科学计算中扮演着非常重要的角色&#xff0c;它们用于估算未知数据点的值&#xff0c;帮助我们理解和预测数据趋势 一、一维插值 1、一维插值定义 已知n1个节点(,)(j0,1,...,n,其中互不相同&#xff0c;不妨设a<<...<b),求任一插值点(…

鸿蒙开发:任务(Mission)与启动模式

任务&#xff08;Mission&#xff09;与启动模式 如前文所述&#xff0c;一个UIAbility实例对应一个任务。UIAbility实例个数与UIAbility配置的启动模式有关。在FA模型下&#xff0c;通过config.json配置文件中的“launchType”属性配置&#xff1b;在Stage模型下&#xff0c;…

QTableWidget自定义代理,实现自动换行

尝试使用setWordWrap(true)&#xff0c;但是仅对中文有效&#xff0c;对英文不会自动换行&#xff0c;最后只能用代理。 代理实现 class WordWrapDelegate : public QStyledItemDelegate { public:using QStyledItemDelegate::QStyledItemDelegate;void paint(QPainter *pai…

【镜像制作】Oracle JDK项目镜像压缩

文章目录 简介代码 简介 大家有没有试过在使用Oracle jdk的项目时&#xff0c;由于jdk的包太大&#xff0c;制作出来的镜像往往特别大&#xff0c;在大规模容器化的场景下&#xff0c;镜像的大小对存储的空间&#xff0c;拉取速度&#xff0c;启动的快慢都有一定 影响&#xff…

C#聊天室②

客户端 桌面 MyClient client;public Form1(){InitializeComponent();}// 进入聊天室按钮方法private void button1_Click(object sender, EventArgs e){if (!string.IsNullOrEmpty(textBox1.Text)){// 开始连接服务器 封装一个自定义客户端类client new MyClient(); // 给cl…

基于jeecgboot-vue3的Flowable流程-流程处理(一)

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 这部分修正一些流程处理中VForm3线上的一些bug问题 1、初始化流程提交与现实的前端页面代码 <!--初始化流程加载默认VForm3表单信息--><el-col :span"16" :offset&qu…