<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{padding:0;margin:0;}
/*定义*/
@-webkit-keyframes rotatae{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*调用*/
div{
width:50px;
height:50px;
background:blue url(images/1.jpg);
background-size:100% 100%;
-webkit-animation-name:rotatae;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
position:fixed;
right:10px;
top:10px;
}
</style>
</head>
<body>
<div id="icon"></div>
<!-- autoplay 自动播放 loop 循环播放 controls 控件 -->
<audio id="audio" src="audio.mp3">此浏览器不支持audio</audio>
</body>
<script src="js/jquery1.7.js"></script>
<script>
//点击图标停止转动,再次点击开始转动
// var audio=document.getElementById("audio");
// audio.play()
//jquery转化为js $("")[0] $("").get(0)
$("#audio").get(0).play();
var flag=false;
$("#icon").click(function(){
if(!flag){
//$(this).css({"-webkit-animation-iteration-count":"0"});
$(this).css({"-webkit-animation-play-state":"paused"});
//音乐停止
$("#audio").get(0).pause();
flag=true;
}else{
//$(this).css({"-webkit-animation-iteration-count":"infinite"});
$(this).css({"-webkit-animation-play-state":"running"});
//音乐播放
$("#audio").get(0).play();
flag=false;
}
})
</script>
</html>