实现一个黑胶唱片播放旋转的功能样式

黑胶唱片旋转代码实现

可以先看效果：http://code.wubin.work/code/css/heijiao-rotate/

HTML

 <div class="guangp">
              <i class="guxz xuanz"></i>
              <i class="dy"></i>
              <i class="xy"></i>
              <i class="gp audio-stick skewing"></i>
</div>

CSS

.guangp {
    position: relative;
    display: inline-block;
    padding-top: 80px;
    padding-bottom: 70px;
    width: 355px;
    height: 321px;
    text-align: center;
}
 .guangp .guxz {
    display: inline-block;
    width: 359px;
    height: 359px;
    background: url(2.png);
}
.guangp .dy {
    position: absolute;
    top: 71px;
    right: -109px;
    width: 85px;
    height: 82px;
    background: url(1.png) no-repeat -356px -18px;
}
.guangp .xy {
    position: absolute;
    top: 71px;
    right: -108px;
    z-index: 3;
    width: 85px;
    height: 85px;
    background: url(1.png) no-repeat -450px -18px;
}
.guangp .gp {
    position: absolute;
    top: 115px;
    right: -70px;
    width: 173px;
    height: 272px;
    background: url(1.png) no-repeat -350px -138px;
    transition: all .6s ease-in-out;
    transform: rotate(-32deg);
    transform-origin: right top;
}

/* 黑胶旋转 */
.guangp .xuanz {
    animation: circleRoate 200s;
    animation-timing-function: linear;
}
.guangp .gp.skewing {
    transform: rotate(0);
}
@keyframes circleRoate{
    from{
        transform:rotate(0) infinite
    }
    to{
        transform:rotate(7600deg)
    }
}

应用的话就像HTML那样：

<i class="guxz xuanz"></i>
<i class="gp audio-stick skewing"></i>

在对应元素上加上skewing和xuanz即可让胶片旋转。同样的如果让胶片不旋转，去掉这两个样式即可。

简易播放器代码实现

可以先看效果：http://code.wubin.work/code/css/heijiao-rotate/easy-audio-player.html

HTML

<div class="audio-box">
      <i class="icon-bofang on"></i>
      <audio preload="none" id="audio" data-time="3">
          <source src="xxx.mp3" type="audio/mpeg">
      </audio>
      <span class="star-time">00:01</span>
      <div class="time-bar">
          <span class="progressBar"></span>
          <i class="move-color" style="width: 200px;"></i>
          <p class="timetip"></p>
      </div>
      <span class="end-time">00:03</span>
        <p class="timeTip"></p>
</div>

CSS

audio:not([controls]) {
    display: none !important;
}
.audio-box {
 margin-bottom: 35px;
 width: 780px;
 height: 100px;
 border-bottom: 1px solid #c9c9c9;
 background: #fff;
}
.audio-box .icon-bofang {
 float: left;
 display: block;
 margin-left: 40px;
 width: 51px;
 height: 51px;
 background: url(audio.png) -14px -16px no-repeat;
 cursor: pointer;
}
.audio-box .icon-bofang.on {
 background-position: -85px -16px;
}
.audio-box .star-time {
 float: left;
 display: block;
 margin-left: 17px;
 width: 59px;
 height: 51px;
 color: #696969;
 text-align: center;
 font-size: 20px;
 line-height: 51px;
}
.audio-box .time-bar {
 position: relative;
 z-index: 1;
 float: left;
 display: block;
 overflow: hidden;
 margin-top: 5px;
 width: 527px;
 height: 41px;
 background: #bfbfbf;
 cursor: pointer;
}
.audio-box .time-bar .progressBar {
 position: absolute;
 left: 0;
 z-index: 3;
 width: 100%;
 height: 100%;
 background: url(audio.png) no-repeat -16px -83px;
}
.audio-box .time-bar .move-color {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
 display: block;
 width: 0;
 height: 24px;
 height: 100%;
 background-color: #658ae4;
}
.audio-box .end-time {
 float: left;
 display: block;
 width: 52px;
 height: 51px;
 color: #696969;
 font-size: 20px;
 line-height: 51px;
}

具体样式切换，只需要在<i class="icon-bofang"></i> 添加on样式即可。