使用css3动画和jq实现音乐播放时，改变喇叭背景图的一个动画效果

首先需要准备三张不一样的背景图：

playimg (1) playimg (2) playimg (3)

 css代码，下面是css3动画的改变背景图片的代码如：

.playimg{
	height: 28px;
    width:28px;
    float:right;
     background:url('../img/my/playimg (1).png') no-repeat center;
     margin-top: -3px;
}
@-webkit-keyframes bg
{
    0% {  background:url('../img/my/playimg (1).png') no-repeat center;
    background-size: cover}
    50% {  background:url('../img/my/playimg (2).png') no-repeat center;
    background-size: cover}
    100% {  background:url('../img/my/playimg (3).png') no-repeat center;
    background-size: cover}
}

 

jsp页面代码略过，由于我实现功能时使用了ajax，所以我的jsp代码使用append写在了jq里面,显示完页面内容，下面的点击事件就是点击播放音乐时，喇叭就会动起来，知道音乐结束就会停止，播放时点击也会暂停，再次点击继续播放，播放结束之后再次点击会重新播放，代码如下：

//显示用户信息
function showuser(){
	var id = $(".user").attr("id");
	$.ajax({
		 url: 'user/getUserbyid.do?u_id='+id,
		 type:'post',
		 async: false,//设置为同步
		 dataType:'json',
		 success:function (r) {
			var user = r.u[0];
			$(".my_1").append("
"+
						""+
						""+
						"
"+
						"点  我   "+
						"
"+
						""+
						"
"+
						"
"+user.nickName+"
"+
						"
"+user.u_sign+"
"+
						"
更换封面图
"+
					"
");
			 $(".my_1").css("background-image","url(img/coverimg/"+user.coverUrl+")").css("background-position","0 0").css("background-repeat","no-repeat");
			  
		 }
	});	
	//点击播放头像音，实现喇叭动画效果
	$(".headsound").click(function(){
		$(".time").html("");
		var  music =  document.getElementById("ling");//获取改ID的dom对象
		music.volume = 0.1;//设置初始化音量
		var time = music.duration;//获取播放时长
		$(".time").html(parseInt(time)+"'");
		//重新播放css3动画
		$(".playimg").each(function() {
		    $(this)[0].addEventListener("animationend",function(){
		        $(this).css("animation","");
		    });
		});
		 if(music.paused){
			 music.play();//播放
			 $(".playimg").css("-webkit-animation","bg 1s "+parseInt(time));//添加css3动画，parseInt(time)播放次数
		 }else{
			 music.pause();
			 $(".playimg").css("animation-play-state","paused");//暂停动画
		 }
		 
		
	});
	

	
}

 实现的页面效果就是这样的：