【CSS3】

admin管理员组

文章数量:1123264

【CSS3】

1. 效果展示

2. 效果分析

1. 开始音乐图标就360度自动无限旋转；
2. 点击图标停止旋转，再次点击继续无限旋转。

3. 实现思路

1. 实现360°旋转

animation-timing-function 属性：linear 匀速旋转

@keyframes audio-rotate-360 {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}
}
@-webkit-keyframes audio-rotate-360 {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}
}
.rui-audio-rotate-360{animation: audio-rotate-360 2s linear;-webkit-animation: audio-rotate-360 2s linear;
}

2. 无限旋转

animation-iteration-count 属性：指定动画应该播放次数【infinite无限次（永远）】

.rui-audio-rotate-360{animation: audio-rotate-360 2s linear infinite;-webkit-animation: audio-rotate-360 2s linear infinite;
}

3. 停止动画

animation-play-state 属性：暂停动画

.rui-animation-play-paused{animation-play-state:paused;-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

4. 实现className的切换

1. JS 实现播放和暂停的切换

HTML

<img class="rui-audio-rotate-360" src="./images/music.png" id="music"/>

JS

document.getElementById("music").onclick = function(event){if(event.className.indexOf('rui-animation-play-paused') > -1){event.className = 'rui-audio-rotate-360';} else {event.className = 'rui-audio-rotate-360 rui-animation-play-paused';}
}

2. JQUERY 实现

$('.rui-audio-rotate-360').click(function () {$(this).toggleClass('rui-animation-play-paused');
})

3. VUE 实现

<img src="./images/music.png" :class="'rui-rotate-360 ' + (isStop ? 'rui-rotate-360-stop' : '')"  
@click="isStop = !isStop" alt=""/>

JS

var app = new Vue({el: '#app',data:{isStop: false}
})

5. 总结

1. 注意：此文章只是单纯实现音乐图标的旋转和暂停的切换，没有对背景音乐的暂停和播放进行处理；
2. css3 的动画功能很强大，但是同时需要我们处理好不同浏览器的兼容性处理！

WXRUI体验二维码

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

本文标签： CSS3