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

2024-06-13 06:52

本文主要是介绍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名称似乎不支持,如有大神了解,烦请指教。

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

这篇关于css系列:音频播放效果-波纹律动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1056580

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的