"婚礼邀请函"小程序：邀请函页面

任务分析

页面右上角有一个背景音乐播放按钮，用于控制音乐播放状态

邀请函页面上显示了新娘和新郎的头像、姓名以及婚礼时间和地点

page、bg(背景图片）和content(内容容器）具有相同的宽度和高度，

它们是层叠在一起的，占满了整个显示区域

content和player将通过在WXSS样式中设置position：fixed进行定位，

背景音乐播放

WXML

<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
  <image src="/images/music_icon.png" />
  <image src="/images/music_play.png" />
</view>

WXSS

/* 音乐播放图标 */

.player {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  /* 提高堆叠顺序 */
  z-index: 1;
}

.player > image:first-child {
  width: 80rpx;
  height: 80rpx;
  /* 为唱片图标设置旋转动画 */
  animation: musicRotate 3s linear infinite;
}

@keyframes musicRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.player > image:last-child {
  width: 28rpx;
  height: 80rpx;
  margin-left: -5px;
}

播放和暂停效果

index.js:

  data: {
    isPlayingMusic: false
  },

index.css:

/* 播放状态 class为.player-play */

.player-play > image:first-child {
  animation-play-state: running;
}

.player-play > image:last-child {
  animation: musicStart 0.2s linear forwards;
}

/* 暂停状态 class为.player-pause */

.player-pause > image:first-child {
  animation-play-state: paused;
}

.player-pause > image:last-child {
  animation: musicStop 0.2s linear forwards;
}

@keyframes musicStart {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(20deg);
  }
}

@keyframes musicStop {
  from {
    transform: rotate(20deg);
  }

  to {
    transform: rotate(0deg);
  }
}