I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Results show

In this full moon night, foreign people look at the moon.

With the song in the swaying, wine together ask the sky.

Mid-Autumn night, give you a moon music player, and a poem, I wish you a happy Mid-Autumn Festival! Ink ❥ (^ _ -)

Material preparation

Let’s start with a few pictures:

  1. The moon image
  2. Dial needle images
  3. Other music button ICONS

HTML part

The HITM part is easy, so let’s just look at the code.

<div class="mid-autumn-wrap">
    <! -- The turning moon -->
    <div class="img-wrap">
      <img class="an img" src="./img.webp" width="350" height="350"/>
    </div>
    <! - touch - >
    <div class="line-wrap">
      <img class="an line" src="./ball.png" width="200" height="150"/>
    </div>
    <! Text -- - >
    <div class="title-wrap">The Mid-Autumn festival</div>
    <! -- Like, download, comment, comment -->
    <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>
    <! -- Progress bar -->
    <div class="process-wrap">
      <div>{{ begin }}</div>
      <div class="all">
        <div class="current" :style="{'width':`${currentWidth}%`}"></div>
      </div>
      <div>{{ end }}</div>
    </div>
    <! Loop, Up and down, Play, List -->
    <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>
Copy the code

CSS animation section

The CSS section is mainly the rotation effect of the moon and the dial needle. We will turn the square moon image into a circle, and then rotate the circular moon image 360 degrees.

1. The square moon goes round

// html
<div class="img-wrap">
  <img class="an img" src="./img.webp" width="350" height="350"/>
</div>
Copy the code
// css
.img-wrap{
  text-align: center;
  .img{border-radius: 250px;}
}
Copy the code

2. Turn the moon 360

useKey frames keyframesCreate a rule called rotation,fromIs equivalent to0%.toEquivalent to100%.rotate(0deg)0 degrees, so the whole thing is going from 0 degrees to 360 degrees.animationAn animation takes 3.5 seconds to complete,linearStudent: is constant velocity,infiniteStands for infinite repetition.

.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.5 s linear infinite;
  }
  .img{border-radius: 250px;}
}
Copy the code

3. Turn the needle, too

The swing of the needle and the rotation principle of the moon is the same, and the moon rotation is different, the rotation center of the needle is left, throughtransform-originProperty is set totop leftYou can change the center of rotation of the dial needle to the left.

/* Dial the needle swing animation 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;
}
Copy the code

JS part

JS part is mainly the implementation of the progress bar. The whole demo is written in VUE. The timer setInterval is used to increase the number of seconds, and then the percentage of seconds is calculated to modify the length of the progress bar to achieve the effect of the progress bar.

<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) {
        < / / SEC 59
        beginArr[1] = Number(beginArr[1]) + 1
        if (beginArr[1] < 10) {
          beginArr[1] = '0' + beginArr[1]}}else {
        > 60 / / SEC
        beginArr[1] = '00'
        beginArr[0] = Number(beginArr[0]) + 1
        // Add 0 if the value is less than 10s
        if (beginArr[0] < 10) {
          beginArr[0] = '0' + beginArr[0]}}this.begin = beginArr.join(':')
      // Calculate the progress bar %
      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>
Copy the code

conclusion

In fact, it is not difficult to make this effect, the main picture rotation and playback progress bar these two parts, to achieve a simple moon music player effect, to participate in this activity is still very fun drop, welcome everyone to participate in the lively round Mid-Autumn Festival.

Source code I put on Gitee, Mid-Autumn Moon player

Since all saw here, pass by a praise 👍