纯css实现语音播报动画效果

先来看看效果图

黑色以下代码

		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxVHMe/v7fbkmUZErRs9/1moUtYBBfxklZR8aYg5KAgvcT25MFDvUhPTaGnHoKIlOpJ0VsPUvAgKNjSS0EPAVGKyanIEmffLuaQhZEmm7Tzeti37ZDdTOb/JN/LvPm9fZ/32/fb/c17vynh6ImyhNdqtdOzs7MrlmVJ13X/LJpfTtuBFEQAdFbwcrn8GoBPAYCZoZT6vkh+Kc3JU1Jmiw8Arus+tCyrBuAcgPcty7rnuu7GceFnIcHM7ywsLJzIky+l/JmZNTNvJ5w7EV8kmNiv2Hnbtu0rAO72er2/2+32yZT8OZTf6/UWAQwAzPT7/e+K4qcVAI2YQSCiuwAeA3hpMBj8tr87qWNBfCHERwCgtb4opTyTJb9erzenjU8rAEDMxXIcZ1UIsWBuz9q2fdXXnfh5EMR3HOcXAGsAIIRYLoI/EQAp5XVmVsx8KaIvoRZrGt9xnAdEdBkAtNbX5+fnZ31DIgU2Kp+IPjf2iwjxg4zLB3BhGn/SIEQVgATwtW3bi4d+4+cKFYCD+N1u90sAfQDY3t6OGvzY/N3d3R9Ns8LMb+TNnwhAt9v9DMAtANBa30bKZ4VD+N8AABF96LNFSkNR+Zubm/8D+Mvcvpk3f+pfTil1AcAjABXbtj84zKmoOoivtb5nmq82Go2Kb0ikNBSVr7V+AABE1MqbH5Tz7pjrW2GciqEJvud5/5pmmYg4Lz4R/WeaL+bNDwrAEAC01lmdlif4RPQs3Witk25Bo/DH9ihzpsIPCsC7BvpHyM9H1QS/VCrJcXs4HPZz5J8CAK31Vt78qQvKzF8AeMEMuj22t9vtVB7IB/G11m+b5pp5eOXFf9n0/5M3f9o5YBnAZXP7sVLq0bhvfX39SRgHgxTEJ6JPzPUn35Co54BIfFM+OGvsq3nzJwJARA2MctaKv5TabDZnACQOwEF8Zl7SWs8DQLlc/mpsb7VaJxFhKxqVv7W1tYjRVvLJ3Nzc/aL5Y9ip/fOGGhhS+/m1Wu00M++Z6uFNf1+cSmUUPjP/buw/FMHP9O1TGDUajZbnefcxOl1uKKWeFcWazeZMp9MZIkFNKIhfr9fPCSFWAcDzvFf6/f5a3vw0dzWx5HneEkbOD/b29l7393U6ncdIWJAL4gshxg/QX+Msfhr8wl9J7uzs3KhUKhtCiDtKKf/WrYRRmTcTPjN/C+AMAAghlo4qvyhlmhqllMsmL2vbts8fN/6xlpTyvfHiMPO1ovlH8aV8pqpWq54QokpEt5RSK0XznwJtVIo5wSg3xgAAAABJRU5ErkJggg==) right 0 no-repeat;

白色以下代码

	  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;

完整代码以黑色为例

HTML

<view class="voice-box"><view class="voice-bg voice-play"></view>
</view>

CSS

// 语音.voice-box {padding-top: 12px;padding-left: 10px;height: 35px;width: 150px;background: #5555ff;border-radius: 0 7px 7px;}.voice-bg {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxVHMe/v7fbkmUZErRs9/1moUtYBBfxklZR8aYg5KAgvcT25MFDvUhPTaGnHoKIlOpJ0VsPUvAgKNjSS0EPAVGKyanIEmffLuaQhZEmm7Tzeti37ZDdTOb/JN/LvPm9fZ/32/fb/c17vynh6ImyhNdqtdOzs7MrlmVJ13X/LJpfTtuBFEQAdFbwcrn8GoBPAYCZoZT6vkh+Kc3JU1Jmiw8Arus+tCyrBuAcgPcty7rnuu7GceFnIcHM7ywsLJzIky+l/JmZNTNvJ5w7EV8kmNiv2Hnbtu0rAO72er2/2+32yZT8OZTf6/UWAQwAzPT7/e+K4qcVAI2YQSCiuwAeA3hpMBj8tr87qWNBfCHERwCgtb4opTyTJb9erzenjU8rAEDMxXIcZ1UIsWBuz9q2fdXXnfh5EMR3HOcXAGsAIIRYLoI/EQAp5XVmVsx8KaIvoRZrGt9xnAdEdBkAtNbX5+fnZ31DIgU2Kp+IPjf2iwjxg4zLB3BhGn/SIEQVgATwtW3bi4d+4+cKFYCD+N1u90sAfQDY3t6OGvzY/N3d3R9Ns8LMb+TNnwhAt9v9DMAtANBa30bKZ4VD+N8AABF96LNFSkNR+Zubm/8D+Mvcvpk3f+pfTil1AcAjABXbtj84zKmoOoivtb5nmq82Go2Kb0ikNBSVr7V+AABE1MqbH5Tz7pjrW2GciqEJvud5/5pmmYg4Lz4R/WeaL+bNDwrAEAC01lmdlif4RPQs3Witk25Bo/DH9ihzpsIPCsC7BvpHyM9H1QS/VCrJcXs4HPZz5J8CAK31Vt78qQvKzF8AeMEMuj22t9vtVB7IB/G11m+b5pp5eOXFf9n0/5M3f9o5YBnAZXP7sVLq0bhvfX39SRgHgxTEJ6JPzPUn35Co54BIfFM+OGvsq3nzJwJARA2MctaKv5TabDZnACQOwEF8Zl7SWs8DQLlc/mpsb7VaJxFhKxqVv7W1tYjRVvLJ3Nzc/aL5Y9ip/fOGGhhS+/m1Wu00M++Z6uFNf1+cSmUUPjP/buw/FMHP9O1TGDUajZbnefcxOl1uKKWeFcWazeZMp9MZIkFNKIhfr9fPCSFWAcDzvFf6/f5a3vw0dzWx5HneEkbOD/b29l7393U6ncdIWJAL4gshxg/QX+Msfhr8wl9J7uzs3KhUKhtCiDtKKf/WrYRRmTcTPjN/C+AMAAghlo4qvyhlmhqllMsmL2vbts8fN/6xlpTyvfHiMPO1ovlH8aV8pqpWq54QokpEt5RSK0XznwJtVIo5wSg3xgAAAABJRU5ErkJggg==) right 0 no-repeat;width: 24px;height: 24px;background-size: 400%;}.voice-play {animation-name: voicePlay;animation-duration: 1s;animation-direction: normal;animation-iteration-count: infinite;animation-timing-function: steps(3);}@keyframes voicePlay {0% {background-position: 0;}100% {background-position: 100%;}}

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

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

相关文章

数据结构 - 队列(精简介绍)

文章目录 单端队列单端队列操作&#xff1a;Queue实现 双端队列双端队列操作&#xff1a;Deque实现 循环队列循环队列手动实现 优先级队列Q 不断取最大礼物并开方 单端队列 普通队列为单端队列&#xff0c;先进先出&#xff08;FIFO&#xff09; 只能从尾部插入&#xff0c;头…

【MySQL进阶篇】SQL优化

1、插入数据 insert优化 批量插入&#xff1a; insert into tb_user values(1,tom),(2,cat),(3,jerry); 如果插入数据过大&#xff0c;可以将业务分割为多条insert语句进行插入。 手动提交事务&#xff1a; start transaction; insert into tb_user values(1,tom),(2,cat),(3…

AI算不出9.11和9.9哪个大?六家大模型厂商总结了这些原因

大模型“答对”或“答错”其实是个概率问题。关于“9.11和9.9哪个大”&#xff0c;这样一道小学生难度的数学题难倒了一众海内外AI大模型。7月17日&#xff0c;第一财经报道了国内外“12个大模型8个都会答错”这道题的现象&#xff0c;大模型的数学能力引发讨论。 “从技术人员…

go exporter开发 第一篇

为什么go程序要采集指标? 通过采集指标,可以从外部观测到程序运行中的一些运行中的数据,比如协程数,web请求的接口等情况,从而进一步分析程序是否有不退出的协程,以及性能,是否存在内存泄漏,通过对接Prometheus,能够观测接口请求时间,访问量,访问成功和访问失败等 …

puzzle(0611)《组合+图论》追捕问题

目录 一&#xff0c;追及问题 1&#xff0c;警察和小偷 2&#xff0c;旋转的4个硬币 3&#xff0c;抓狐狸 二&#xff0c;围堵问题 三&#xff0c;追及围堵 一&#xff0c;追及问题 1&#xff0c;警察和小偷 如下图&#xff0c;警察先走&#xff0c;警察和小偷轮流一人…

【LLM】基于ColossalAI-0.3.6对llama2-7B-Chat做全参数微调

文章目录 环境准备工作下载llama2-7B下载ColossalAI数据集准备准备原始数据集数据集处理开始训练准备训练脚本运行脚本推理验证加载模型推理环境 操作系统: ubuntu22.04机器规格: CPU:96c;内存:736 GiB;GPU:8 * NVIDIA V100 (32GB)软件信息: Python 3.11.5;ColossalA…

在 Navicat BI 创建自定义字段:类型更改字段

早在 Navicat 17 的预览版中&#xff0c;我们就已经介绍了一些新的商业智能&#xff08;BI&#xff09;功能&#xff0c;即图表互动和计算字段。需要说明的是&#xff0c;计算字段不是 Navicat BI 中唯一可用的自定义字段类型。事实上&#xff0c;有五种&#xff1a;类型改变、…

【笔记-软考】软件架构概念

Author&#xff1a;赵志乾 Date&#xff1a;2024-07-18 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 架构定义 架构是指系统的一个或多个结构&#xff0c;结构中包括构件、构件的外部可见属性以及构件之间的相互关系。 故架构是一种表…

自定义View(8)View的绘制流程

安卓UI的重点之一就是View的绘制流程&#xff0c;经常出现在面试题中。熟悉View的绘制流程&#xff0c;不仅能轻松通过View相关的面试&#xff0c;也可以让我们更加方便的使用自定义View以及官方View。此篇先以常见面试题为切入点&#xff0c;说明自定义View的重要性&#xff0…

modulepreload 对性能的影响

一、正面影响 减少加载时间&#xff1a; modulepreload 可以让浏览器提前下载模块脚本&#xff0c;减少页面加载时间&#xff0c;特别是对于依赖较多的复杂应用。这种预加载可以让浏览器在遇到 modulepreload 链接时立即开始下载&#xff0c;而不是等到实际需要时才下载提升用…

基于深度学习的股票预测

基于深度学习的股票预测是一项复杂且具有挑战性的任务&#xff0c;涉及金融数据的分析和预测。其目的是利用深度学习模型来预测股票价格的走势&#xff0c;从而帮助投资者做出更为准确的投资决策。以下是对这一领域的系统介绍&#xff1a; 1. 任务和目标 股票预测的主要任务和…

LLM大模型实战项目--基于Stable Diffusion的电商平台虚拟试衣

本文详细讲解LLM大模型实战项目&#xff0c;基于Stable Diffusion的电商平台虚拟试衣 一、项目介绍 二、阿里PAI平台介绍 三、阿里云注册及开通PAI 四、PAI_DSW环境搭建 五、SDLORA模型微调 一、项目介绍 AI虚拟试衣是一种创新的技术&#xff0c;利用人工智能和计算机视觉技…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 卢小姐的生日礼物(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测…

解决网络游戏频繁掉线的策略与实践

网络游戏中的频繁掉线不仅影响玩家体验&#xff0c;也可能揭示网络基础设施、软件架构或外部干扰的问题。本文将探讨导致游戏掉线的常见原因&#xff0c;并提出一系列技术解决方案&#xff0c;帮助开发者和运维团队提升游戏服务的稳定性和可靠性。 掉线原因分析 网络连接不稳…

为什么现在的小家电换了Type-C接口后需要PD诱骗芯片

在当今科技飞速发展的时代&#xff0c;小家电产品正经历着前所未有的变革。随着消费者对于便捷性、高效性和安全性的要求不断提高&#xff0c;小家电产品的接口设计也逐渐向Type-C接口靠拢。然而&#xff0c;这一转变并非简单的接口替换&#xff0c;它背后隐藏着对PD诱骗芯片的…

深度解析:在 React 中实现类似 Vue 的 KeepAlive 组件

在前端开发中&#xff0c;Vue 的 keep-alive 组件是一个非常强大的工具&#xff0c;它可以在组件切换时缓存组件的状态&#xff0c;避免重新渲染&#xff0c;从而提升性能。那么&#xff0c;如何在 React 中实现类似的功能呢&#xff1f;本文将带你深入探讨&#xff0c;并通过代…

【PG】PostgreSQL高可用之repmgr事件通知

目录 描述 结合脚本 占位符 repmgr命令 生成的事件&#xff1a; repmgrd 生成的事件&#xff08;流复制模式&#xff09;&#xff1a; 描述 每次repmgr或repmgrd执行重大事件时&#xff0c;都会将该事件的记录连同时间戳、失败或成功的标识以及进一步的详细信息&#xff08…

(三)Python3接口自动化测试,请求参数的参数化工具类

(三)Python3接口自动化测试,请求参数的参数化工具类 1.前言: 需求:Web API接口Pyhon3自动化测试中,需要对接口请求接入的数据中参数变量进行替换 Python3替换接口请求参数中的值,用到方法: 对请求参数进行正则表达式匹配,取到需要替换的变量,例如”A”对获取到变量”…

c语言之 *指针与 **指针

*n 一级指针&#xff1a; &nn*n自身地址指向地址指向地址值 **s 二级指针&#xff1a; &ss*s**s自身地址一级指针地址一级指针指向地址一级指针指向地址值 CHILD *walk, *next, *tmp_child, **scan;next walk->next scan &walk->next; while (*scan) { …

ansible——ansible的配置文件

一、ansible的inventory文件 1、什么是inventory文件 inventory文件定义了ansible管理的主机&#xff0c;说白了就是inventory文件中的内容是被管理的主机 inventory文件分为两种&#xff0c;一种是静态的inventory文件&#xff0c;一种是动态inventory文件 静态的inventor…