js+css如何制作（音频）图标【切换播放动画】效果？

步骤如下：

1、准备播放前的图标和播放时的图标，播放时的有4种不同状态，将4种图标设置成一张图片

2、布局html+css

<div class="word_total"><span>美 /mpren/</span><!-- 播放时的动画 --><div class="voice voicePlay"></div><!-- 播放前的图标 --><img class="audioPlayId" @click="audioPlay()" src="@/assets/home/bugles_icon.png" alt=""><!-- 音频 --><audio class="audioId" controls><source src="@/assets/home/music.mp3" type="audio/mpeg"></audio>
</div><style lang="scss" scoped>
// 动画
.voice {background: url('../../assets/home/horns.png') right 0 no-repeat;background-size: 400%;width: 80px;height: 71px;margin-right: -24px;display: none;
}.voicePlay {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%;}
}
</style>

此处需将audio本身的音频文件隐藏

// 也可用display:none 隐藏，页面展示需要，此处用以下方式，按需即可.audioId{opacity: 0;width: 0;
}

3、js控制audio播放前后的图标状态

methods: {// 播放音频audioPlay () {let audios = document.getElementsByClassName('audioId')[0]let audioPlayId = document.getElementsByClassName('audioPlayId')[0]let voices = document.getElementsByClassName('voice')[0]if (audios !== null) {// 播放if (audios.paused) { // 检测播放是否已暂停.audio.paused 在播放器播放时返回false.audios.play()voices.style.display = 'block'audioPlayId.style.display = 'none'}// 播放结束audios.addEventListener('ended', function () {voices.style.display = 'none'audioPlayId.style.display = 'block'}, false)}}
}

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

js+css如何制作（音频）图标【切换播放动画】效果？相关推荐

安卓开发底部导航图标切换时动画效果_体验安卓 10：好用百倍都不止！
十万人测评俱乐部 Q群:737976088 资源置换合作请加VX:15216685489 谷歌正式发布了 Android 10,这是安卓的第十个大版本更新. 雷科技(微信:leitech)在第一时间将 ...
安卓开发底部导航图标切换时动画效果_安卓10系统终于来了，流畅度堪比苹果？...
经过Android多年的发展,系统的流畅性和手感每年都在逐步改进.很明显,谷歌一直在朝着这个目标努力.而谷歌也是在9月4日正式推出了安卓10系统. 除了大幅度提高流畅度外,安卓10还添加了原生手势导航 ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
html5鱼游动动画,CSS和D3制作小鱼游动的交互动画效果
CSS和D3制作小鱼游动的交互动画效果发布时间:2020-05-13 13:54:35 来源:亿速云阅读:118 作者:Leah 本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果.有一 ...

js+css如何制作（音频）图标【切换播放动画】效果？

js+css如何制作（音频）图标【切换播放动画】效果？相关推荐

最新文章

热门文章