刚刚做了一个项目，涉及到音乐播放动画的效果，通过查找资料学习，最终实现了这一效果，还是满满的成就感，在这里就把实现的代码奉献给大家
第一步：首先写好HTML代码
是不是很简单呢
第二部：给代码中的类名，标签附加样式
#audio-btn {
position: absolute;
right: 0;
display: inline-block;
width: 30px;
height: 30px;
background: url(images/home/music_icon.png) no-repeat center center;
background-size: 30.5px 30.5px;
}
.audio-rotate {
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
}
@keyframes rotating {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@-moz-keyframes rotating {
from {
-moz-transform: rotate(0)
}
to {
-moz-transform: rotate(360deg)
}
}
这里应用的是css3的动画动能
第三部:js代码
先引入js框架
<script src=”js/jquery-2.1.4.min.js”></script>
在写js实现相关效果
<script>
var x = document.getElementById("media");
$(function(){
$("body").on("click","#audio-btn",function(){
$(this).toggleClass("audio-rotate");
})
})
</script>
<script>
var x = document.getElementById("media");
$(function(){
$("body").on("click","#audio-btn",function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.pause();
}else{
x.play();
}
})
});
</script>
http://m.bbyears.com/css/110973.html
推荐访问:css3新增属性 css3面试题