虚拟DJ打碟机测试1

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>虚拟DJ打碟机测试</title>
</head>
<body>
    <h1 align="center">虚拟DJ打碟机测试</h1>
  <div class="strick"><!--左播放轴-->
    
  </div>
  <div id="left"><!--左转盘-->
    </div>
  <div class="strick" style="right:0;top:82px;">
  </div><!--右播放轴-->
  <div id="right">
      </div><!--右转盘-->
 <div>
  <audio controls="controls"       src="http://link.hhtjim.com/163/29737987.mp3" id="ll"></audio><!--左播放器-->
  <audio id="ar" controls="controls"></audio>
  <!--右播放器--></div>
  <div><strong>
    播放列表</strong>
    <ol>
      <li id="life" onclick="lifes()">life-Steerner</li>
      <li id="seve" onclick="seve()">Seve</li>
      <li id="hello" onclick="hello()">Hello-OMFG</li>
      <li>China-x-徐梦圆</li>
      <li>Rainbow</li>
      <li>sisiters' noise</li>
      <li>GOSICK</li>
      <li>Rock in the stones</li>
      <li>New Game</li>
      <li>135-Alan Walker</li>
      <li>alone-Alan Walker</li>
      </ol>
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510988306673&di=52c2de3a035473f66de4a760c4d595fb&imgtype=0&src=http%3A%2F%2Fwww.dabaoku.com%2Fgif%2F018%2Fgif008.gif"><img src=
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510988386214&di=cb449bc5ecc22e8603fe4faa400aaef4&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014e3e55fd39776ac7251df8f9a8b0.gif">
  </div>
  </body>
</html>

HTML

xxxxxxxxxx
 
#left,#right{
  background:orange;
  width:120px;
  height:120px;
  display:inline-block;
  border:1px solid;
  border-radius:45px;
  animation:rotate 5s infinite;
}
@keyframes rotate{
  to{transform:rotate(360deg);}
}
#right{
  position:absolute;
  right:0;
}
#ar{
  position:absolute;
  right:0;
}
.strick{
  height:10px;
  width:120px;
  border:1px solid;
  background:orange;
  transform:rotate(30deg);
  position:fixed;
  z-index:1;
}
@keyframes play{
  from{transform:rotate(0deg);}
    to{transform:rotate(30deg);}
}
ol{
    background:#6F6866;
   width:120px;
}
li:hover{
  cursor:pointer;
  text-decoration:underline;
}
h1{
  animation:h1 3s infinite;
}
@keyframes h1{
  from{color:blue;}
  to{color:green;}
}/*标题动画*/
img{
 height:100px;
}

CSS