qq音乐怎么改歌词背景颜色-微信音乐小程序实战（三）：歌曲详情页搭建（图片旋转、自定义进度条等）

我们想要达到的效果如下：

新建文件夹songDetail

我们先新建一个文件夹，步骤和之前新建文件夹recommendSong一样

为了方便调试，我们修改app.json中的pages部分

好了，现在我们可以完成我们的重要部分：歌曲详情页面

基本结构

我将直接粘贴此页面的基本布局的代码，然后我将重点讨论较困难的部分

歌曲详细信息.wxml

<view class="songDetailContainer">
<view class="headContainer">
    <view class="musicName">当真</view>
    <view class="composer">野小马</view>
</view>

<view class="discContainer" bindtap="handlePageState">
    <image class="musicImg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626067744&t=2f85beb96fa7ef78103f46e9c29e2d40"></image>
</view>
<view class="bottomContainer">
    
    <view class="progressControl">
        <text>00:00</text>
        
        <view class="barControl">
        </view>
        <text>3:14</text>
    </view>
    
    <view class="musicControl">
        <text class="iconfont icon-shuffle"></text>
        <text class="iconfont icon-shangyishou" id="pre"></text>
        <text class="iconfont icon-bofang2 big"></text>
        <text class="iconfont icon-next" id="next"></text>
        <text class="iconfont icon-liebiao"></text>
    </view>
</view>
</view>

歌曲详情.wxss

.songDetailContainer {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #444;
}
.headContainer {
  margin-top: 10rpx;
  height: 80rpx;
  color: white;
  text-align: center;
}
.headContainer .composer {
  color: #bbb;
  font-size: 26rpx;
}
.discContainer {
  height: calc(100vh - 460rpx);
 
}
.discContainer {
  padding-top: 10vh;
}
.discContainer .musicImg {
  width: 450rpx;
  height: 450rpx;
  border-radius: 50%;
  border: 5px solid rgba(150, 150, 150, 0.3);
}
.progressControl {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
}
.progressControl text {
  font-size: 20rpx;
  color: white;
  padding: 0 20rpx;
}
.barControl {
  position: relative;
  width: 560rpx;
  height: 4rpx;
  background: rgba(190, 190, 190, 0.2);
  margin: auto;
}
.musicControl {
  position: absolute;
  bottom: 30rpx;
  left: 0;
  width: 90%;
  display: flex;
  margin: 0 5%;
}
.musicControl text{
  width: 20%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  color: #fff;
  font-size: 50rpx;
}
.musicControl .big{
   font-size: 100rpx;
}

添加上述代码后，页面显示效果如下：

不错，那我们就可以开始改进细节了！

改进歌曲详情页1.图片旋转

要旋转图片卡通人物，需要使用css的animation属性

首先我们让它旋转并给css添加样式

.discAnimation {
  animation: disc 25s linear;
}
@keyframes disc {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

同时在wxml中对应的标签中添加class属性

保存，我们可以看到图片已经旋转了； 很完美啊，但是为什么转一圈就停了，怎么让它继续转呢？

也就是给动画添加无限

这时候我们的图片就真的可以完美旋转了

2.自定义进度条

现在我们来制作一个进度条，进度条完成如下：

首先我们需要在wxml中添加一个实时进度条

 
        <view class="barControl">
    
         
         <view class="audio-currentTime-Bar">
                    
                    <view class="audio-circle"></view>
                </view>
        </view>

接下来，就是使用我们的wxss来完成进度条的制作了

.audio-currentTime-Bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 4rpx;
  background: rgb(254,47,34);
  width: 180rpx;
}
.audio-circle {
  position: absolute;
  right: -12rpx;
  top: -4rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #fff;
}

看看此时我们的进度条，它已经成型了，不是吗？ 只是我们还在写死而已。 在接下来的教程中，我们将逐步让它活跃起来。 现在我们就这样做吧

3、高大背景的制作

我在看网易云音乐的背景时，感觉很高大上qq音乐怎么改歌词背景颜色，而且背景颜色会随着歌曲的变化而变化，比如下面三张图

我仔细观察了一下，发现背景图片应该是之前旋转图片的放大模糊版，所以我们现在尝试一下，看看是不是这样的

因为我们想要对这张背景图做一些事情表情包设计，所以我们不直接将背景图添加到根标签中，而是使用css将图像变成我们的背景图

① 我们现在在wxml中添加图片标签

<image class="bgImg " src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626067744&t=2f85beb96fa7ef78103f46e9c29e2d40"></image>

② 通过css样式将其设为背景图

.songDetailContainer .bgImg {
  position: absolute;
  width: 150vw;
  height: 150vh;
  z-index: -1;
}

同时去掉.songDetailContainer中的背景色

这时候我们的页面就变成了这样

③ 模糊图片

Yohoho，我感觉如果画面变得模糊的话，就和网易云音乐的效果很像了。 现在我们将为它添加模糊

（blur的值越大越模糊）

页面就变成这样了

看起来还是那个样子qq音乐怎么改歌词背景颜色，但是仔细一看，你会发现上面有一些白色。 如果增加模糊效果，我们可以看到四个边都会变成白色

所以我使用了边距

margin: -50vh -50vw;

现在效果如下：

看起来还是不错的，但是如果我们的背景图比较白，那就不太友好了，请看下图

如果是这么白的图片，那么我们的页面就结束了。 我们不能把页面的命运寄托在图片上； 我发现我们的背景比网易云的背景要淡一些，而且无论网易云音乐怎么改，都不可能出现像我们这么糟糕的情况，所以我就拍拍小脑袋想出了一个好主意。

④ 最后调整背景图片

如果你想让图片整体暗一些，我的想法是，你可以在这张图片下面放一张全黑的图片，然后调整这张图片的透明度，让下面的黑色图片突出出来，这样在光线明亮的地方，黑色的会更明显（我真是个聪明的小鬼）

我们先从一张黑色的图片开始

此图片为纯黑色图片，保存在static下的images文件夹中，命名为black

然后在songDetail.wxml中添加这张图片

修改wxss文件

.songDetailContainer .bgBlack {
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: -2;
  opacity: 0.9;
}

现在看看页面是什么样子的

感觉比较暗，但是还不够暗，所以我们给上一张图设置了透明度

让我们看看现在是什么样子

哦~~~这样看起来就很不错了，这样我们就可以实现我的美丽，我做主，不再受照片的摆布。

本篇文章我们就完成了歌曲详情页的静态搭建。 在下一篇文章中，我们将开始给这个页面添加砖块和瓷砖，这样它不仅有漂亮的皮肤，而且还具有对称的能力