最近给个人博客做了个音乐盒功能,能实现暂停,切换歌曲,拖拽时间,音频可视化的功能,效果:在个人博客界面右上角可以看到旋转的音乐图标,hover后可展示音乐盒。因为项目中用了vuecli框架,音乐盒以vue组件的形式编写,图标用到了阿里图标库,如果你想直接使用该组件需要替换下图标,css变量。 1 旋转音标 通过animation重复动画实现,不是很难,值得注意的是rotate对inline标签不起作用,需要转化成block或者inline-block,直接上代码: .musicBox .icon-music{ /* rotate对inline元素不起作用,转化成block */ dis