我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

`效果展示`

动画12.gif

在这花好月圆夜，异乡人儿望明月。

伴着歌儿在摇曳，一起把酒问青天。

中秋之夜，送给大家一个月亮音乐播放器，还有一首诗，祝大家中秋快乐！笔芯❥(^_-)

`素材准备`

首先准备几张图片：

月亮图片
拨针图片
其他的音乐按键图标

`HTML部分`

hitm部分比较简单，我们直接看一下代码吧。

<div class="mid-autumn-wrap">
    <!-- 转动的月亮 -->
    <div class="img-wrap">
      <img class="an img" src="./img.webp" width="350" height="350"/>
    </div>
    <!-- 拨动 -->
    <div class="line-wrap">
      <img class="an line" src="./ball.png" width="200" height="150"/>
    </div>
    <!-- 文字 -->
    <div class="title-wrap">
      中秋
    </div>
    <!-- 喜欢、下载、评论、留言 -->
    <div class="action-wrap-1">
      <img class="an line" src="./image/love.png" width="50" height="50"/>
      <img class="an line" src="./image/download.png" width="35" height="35"/>
      <img class="an line" src="./image/message.png" width="35" height="35"/>
      <img class="an line" src="./image/comment.png" width="40" height="40"/>
    </div>
    <!-- 进度条 -->
    <div class="process-wrap">
      <div>{{ begin }}</div>
      <div class="all">
        <div class="current" :style="{'width':`${currentWidth}%`}"></div>
      </div>
      <div>{{ end }}</div>
    </div>
    <!-- 循环、上下曲、播放、列表 -->
    <div class="action-wrap-2">
      <img class="an line" src="./image/loop.png" width="35" height="35"/>
      <img class="an line" src="./image/pre.png" width="35" height="35"/>
      <img class="an line" src="./image/ing.png" width="40" height="40"/>
      <img class="an line" src="./image/next.png" width="35" height="35"/>
      <img class="an line" src="./image/list.png" width="40" height="40"/>
    </div>
  </div>

`CSS动画部分`

CSS部分主要是月亮和拨针的旋转效果，我们要把方形的月亮图片变成圆形，再把圆形月亮图360度循环旋转。

1. 方形月亮图片变圆形

// html
<div class="img-wrap">
  <img class="an img" src="./img.webp" width="350" height="350"/>
</div>

// css
.img-wrap{
  text-align: center;
  .img{border-radius: 250px;}
}

2. 把月亮360转动起来

转动.gif 使用关键帧 keyframes创建一个起名为rotation的规则，from等价于 0%，to等价与100%,rotate(0deg)旋转0度，整体代表从0度旋转到360度。animation一次动画完成时间是3.5s，linear代表是匀速的，infinite代表无限的重复循环。

.img-wrap{
  text-align: center;
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
  }
  .an{
    -webkit-transform: rotate(360deg);
    -webkit-animation: rotation 3.5s linear infinite;
  }
  .img{border-radius: 250px;}
}

3. 把拨针也转动起来

转动2.gif 拨针的摆动和月亮的转动原理是一样的，和月亮转动不同的是，拨针的旋转中心是左边，通过transform-origin属性的值设为top left可以把拨针的旋转中心变成左边。

/*拨针摇摆动画 css*/
@-webkit-keyframes rabbit{
    25% {-webkit-transform: rotate(10deg);}
    50% {-webkit-transform: rotate(20deg);}
    75% {-webkit-transform: rotate(10deg);}
    100% {-webkit-transform: rotate(0deg);}
    }
.an{
    transform-origin: top left;
    -webkit-animation: rabbit 3s linear infinite;
}

`JS部分`

JS部分主要是进度条的实现。整个demo是用vue写的。主要是通过定时器setInterval去实现秒数的增加，再计算出秒数的百分比去修改进度条的长度，从而实现进度条的效果。

<script>
export default {
  data () {
    return {
      currentWidth: 0,
      timer: '',
      begin: '00:00',
      end: '03:54',
      stop: false
    }
  },
  methods: {
    ing () {
      const beginArr = this.begin.split(':')
      const endArr = this.end.split(':')
      // 增加1s
      if (Number(beginArr[1]) < 60) {
        // 秒 < 59
        beginArr[1] = Number(beginArr[1]) + 1
        if (beginArr[1] < 10) {
          beginArr[1] = '0' + beginArr[1]
        }
      } else {
        // 秒 > 60
        beginArr[1] = '00'
        beginArr[0] = Number(beginArr[0]) + 1
        // 小于10s 补0
        if (beginArr[0] < 10) {
          beginArr[0] = '0' + beginArr[0]
        }
      }
      this.begin = beginArr.join(':')
      // 计算进度条%
      const beginNum = Number(beginArr[0] * 60) + Number(beginArr[1])
      const endNum = Number(endArr[0] * 60) + Number(endArr[1])
      this.currentWidth = (beginNum / endNum) * 100
      if (this.currentWidth === 100) {
        this.begin = '00:00'
      }
    }
  },

  mounted () {
    this.timer = setInterval(() => {
      this.ing()
    }, 1000)
  }
}
</script>

`总结`

其实做出来这个效果并不难，主要就是图片的转动和播放进度条这两部分，实现了一个简单的月亮音乐播放器效果，参加这个活动还是很好玩滴，欢迎大家踊跃参加，热热闹闹团团圆圆过中秋。

源码我放到了Gitee上，中秋月亮播放器

既然都看到这里了，走过路过点个赞吧👍

❤️ 中秋返场❤️做一个月亮音乐播放器

效果展示

素材准备

HTML部分

CSS动画部分

JS部分

总结