html旋转音乐图标播放器,css特效之旋转音乐播放器

本次需要用到的知识点有：

transform

setInerval

使用场景：在移动端页面上方添加一个旋转的音乐图标，音乐暂停，停止旋转，音乐播放，继续旋转，这里使用的是vue。

原理：原理很简单，使用setInerval函数来让图片每100ms旋转一次，旋转用css中的transform方法，将旋转角度设置为全局变量，这样在暂停之后继续播放能接着上次的位置继续旋转

//音乐播放

//音乐暂停

需要用到的变量

musicTF: false,//是否显示禁止播放

musicNum: 0,//初始旋转角度

musicRotate: "rotate(" + 0 + "deg)",

interval: null,//定时器

使用方法

/**

* 暂停音乐并停止旋转

musicPause() {

this.$refs.MusicPlay.pause();

this.musicTF = true;

if (this.interval !== null) {

clearInterval(this.interval); //停止定时器

}

/**

* 播放音乐并开始旋转

musicPlay() {

this.$refs.MusicPlay.play();

this.musicTF = false

this.countMusicNum();

/**

* 设置定时器旋转，这个是放在mouted方法中，需要页面一加载就旋转

countMusicNum() {

let that = this;

that.interval = setInterval(function () {

that.musicNum = that.musicNum + 10;

that.musicRotate = "rotate(" + that.musicNum + "deg)";

}, 100);

效果图

html旋转音乐图标播放器,css特效之旋转音乐播放器相关推荐

【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐
1. 效果展示 2. 效果分析开始音乐图标就360度自动无限旋转: 点击图标停止旋转,再次点击继续无限旋转. 3. 实现思路 1. 实现360°旋转 animation-timing-functio ...
html音乐播放器代码自动,html5 css3音乐播放器代码
特效描述:html5 css3 音乐播放器代码.html5 css3音乐播放器代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码标题歌手 00:00/00:00 var music ...
单击音乐图标，实现音乐的暂停与播放。
今天训练H5大赛的时候学习到了一个新的内容, 就是以上的题目. 一共三部曲. 废话不多说,上代码. 1.创建一个.html页面,并且引入音乐和图标,用来实现网页的显示. <!DOCTYPE ht ...
html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结
前段时间写过一篇介绍简单音乐播放器效果开发的博文<为你的博客添加简单的CSS3音乐播放器>,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML ...
HTML5期末大作业：音乐网站设计——风车乐栈在线音乐播放HTML+CSS
HTML5期末大作业:音乐网站设计--风车乐栈在线音乐播放HTML+CSS 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
html5中音乐播放器怎么写,html5简单音乐播放器
自己写的一个简单的音乐播放器, 主要实现了控制播放暂停,时间显示,音乐进度条点击以及拖动改变播放进度效果. 基于jquery编写,需要引入jquery. HTML: 00:00:00 00:00:00 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
android+多米音乐+自动播放,android 高仿多米音乐播放器
半年前写了个音乐播放器,仿的是多米的UI界面之前发表在eoe社区,今天也发到csdn上来不罗嗦,先上效果图: 下面简单介绍下代码: MusicPlayer 播放音乐的核心类,该类有以下成员变量 p ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...
7款高颜值HTML5播放器：让你的音乐有声有色
原文:http://www.codeceo.com/article/7-cool-html5-player.html 这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器 ...

html旋转音乐图标播放器,css特效之旋转音乐播放器

html旋转音乐图标播放器,css特效之旋转音乐播放器相关推荐

最新文章

热门文章