<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
css 类型；
body背景颜色为粉色
body{
background: pink;
}
box盒子宽高300px ，盒子外边距上下100px 作业auto，使用相对定位
.box{
width: 300px;
height: 300px;
margin:100px auto;
position: relative;
}
动画为谷歌兼容，动画名字强哥，花费时间4秒，匀速曲线，无限循环播放
.ro{
-webkit-animation:qiangge 4s linear infinite;
}
播放开是0度，去是360度
@-webkit-keyframes qiangge{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
小盒子头部和底部，用绝对定位，顶部为0，左边为0，宽高100%，超出隐藏，圆形
.top,.bottom{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
}
顶部过渡所有，花费时间0.5秒，运动曲线逐渐减慢，0秒开始。设置旋转中心点为右下角开始
.top{
transition: all 0.5s ease 0s;
transform-origin:bottom;
}
音乐盒子沿着x轴移动180度
.music{
transform:rotateX(180deg);
}
</style>
写js代码，引入一个jQuery文件
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
开始使用一个函数，使用if语句让音乐播放。
$(document).ready(function() {
var flag=1;
$(".top").click(function(event) {
if(flag==1)
{
$(this).addClass('music');
$(".bottom").addClass('ro');
flag=0;
$("audio")[0].load();
$("audio")[0].play();
}
else
{
$(this).removeClass('music');
flag=1;
$("audio")[0].pause();
$(".bottom").removeClass('ro');
}
});
});
</script>
</head>
<body>
插入音乐。MP3格式
<audio src="music.mp3"></audio>
定义一个盒子为box
<div class="box">
盒子的底部放一张图片
<div class="bottom"><img src="musicb.jpg" alt=""></div>
盒子的顶部放另外一张图片
<div class="top"><img src="musict.jpg" alt=""></div>
</div>
</body>
</html>
是一个旋转的水晶球并且可以播放音乐；