周董的音乐魔法盒：与杰伦一起畅游的播放器

前言

今天就让我带领小伙伴做一个精美的案例------音乐播放器

先给大家看完运行效果

HTML

让我们先分析一下整体结构，总体分为头部和身体，分别用music__head和music__body表示

我们首先拿music__head进行分析,里面有一个背景图片但是是虚化的、一个"<"标志以及一段"正在播放"文字。背景虚化我们可以在css中设置filter: blur(10px);，"<"标志可不是键盘上的"<",虽然他们很相似，但是我要做到绝对美观，所以这里面我用到的是导入阿里的iconfont矢量图标库。下面给大家看一下这个部分html代码：

js 复制代码

 <div class="music">
        <div class="music__head">
            <div class="bg"></div>
            <div class="music__head-title">
                <div class="back"> 
                    <i class="iconfont icon-fanhui"></i>
                </div>
                <div class="title">正在播放</div>
            </div>
        </div>

下面我们该开始分析music__body，一共分成这几个模块，如下图所示：

其中body-line中的进度条是由两个border标签叠加在一起设置的

js 复制代码

          <div class="body-line">
                <div class="bord">
                    <div class="bord-left"></div>
                    <div class="bord-right"></div>
                </div>
            </div>

而body-play和body-moded中的图标是由阿里的iconfont矢量图标库提供的

js 复制代码

            <div class="body-play">
                <div class="random">
                    <i class="iconfont icon-suijibofang"></i>
                </div>
                <div class="last">
                    <i class="iconfont icon-shangyishoushangyige"></i>
                </div>
                <div class="play">
                    <i class="iconfont icon-bofang1"></i>
                </div>
                <div class="next">
                    <i class="iconfont icon-xiayigexiayishou"></i>
                </div>
                <div class="like">
                    <i class="iconfont icon-xihuan"></i>
                </div>
            </div>

让我们看看这段完整的HTML代码：

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4310338_vyci7a905pl.css">
</head>
<body>
    <div class="music">
        <div class="music__head">
            <div class="bg"></div>
            <div class="music__head-title">
                <div class="back"> 
                    <i class="iconfont icon-fanhui"></i>
                </div>
                <div class="title">正在播放</div>
            </div>
        </div>
        <div class="music__body">
            <div class="body-pic">
                <img src="https://img1.baidu.com/it/u=2248470755,2200340184&fm=253&fmt=auto&app=138&f=PNG?w=543&h=500" alt="">
            </div>
            <div class="body-desc">
                <p class="name">说好不哭</p>
                <p class="author">周杰伦</p>
            </div>
            <div class="body-line">
                <div class="bord">
                    <div class="bord-left"></div>
                    <div class="bord-right"></div>
                </div>
            </div>
            <div class="time">
                <span class="time-left">02:41</span>
                <span class="time-left">04:41</span>
            </div>
            <div class="body-play">
                <div class="random">
                    <i class="iconfont icon-suijibofang"></i>
                </div>
                <div class="last">
                    <i class="iconfont icon-shangyishoushangyige"></i>
                </div>
                <div class="play">
                    <i class="iconfont icon-bofang1"></i>
                </div>
                <div class="next">
                    <i class="iconfont icon-xiayigexiayishou"></i>
                </div>
                <div class="like">
                    <i class="iconfont icon-xihuan"></i>
                </div>
            </div>
            <div class="body-model">
                <div class="model-left">
                    <i class="iconfont icon-yinxiao"></i>
                </div>
                <div class="model-right">
                    <i class="iconfont icon-peizhizhongxin"></i>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

让我们来分析一下CSS代码，此代码是被用来重置浏览器默认的样式，以确保不同浏览器在渲染页面时具有一致的起点

js 复制代码

*{
    padding: 0;
    margin: 0;
}

让我们看看完整的CSS代码：

js 复制代码

*{
    padding: 0;
    margin: 0;
}
.music__head{
    position: relative;
    height: 303px;
    overflow: auto; /* 变成BFC容器 */
}
.music__head .bg{
    width: 100%;
    height: 303px;
    background: url('https://img1.baidu.com/it/u=2248470755,2200340184&fm=253&fmt=auto&app=138&f=PNG?w=543&h=500');
    background-size: 100% 100%;
    filter: blur(10px); /* 背景虚化 */
    position: absolute;
    z-index: -1; /* 用于控制元素在垂直方向上的层叠顺序。 */
}
.music__head-title{
    margin: 45px 0;
    color: #fff;
    padding: 0 40px;
}
.back{
    float: left;
}
.title{
    text-align: center;
    font-size: 12px;
}
.music__body{
    width: 100%;
    height: calc(100vh - 130px);
    position: absolute;
    top: 130px;
    background-color: #fff;
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
}
.body-pic{
    width: 257px;
    height: 283px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -39px;
    box-shadow: 0 0 10px #efefef;/* 设置阴影效果 */
}
.body-pic img{
    height: 100%;
}
.body-desc{
    margin-top: 280px;
    text-align: center;
}
.name{
    font-size: 21px;
    font-weight: bold;
    line-height: 57px;
}
.author{
    font-size: 15px;
    font-weight: bold;
    line-height: 42px;
}
.body-line{
    width: 245px;
    margin: 0 auto;
    margin-top: 30px;
}
.bord-left{
    width: 100px;
    border: 2px solid #F03030;
}
.bord-right{
    width: 245px;
    border: 1px solid #C6C6C6;
}
.time{
    margin-top: 8px;
    font-size: 8px;
    color: #9EA0AD;
    font-family: SourceHanSansCN;
    font-weight: bold;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.body-play{
    width: 280px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.body-model{
    width: 230px;
    margin-top: 5px;
    margin: 0 auto;
    display: flex;
    justify-content:space-between;
    align-items: center;
}

总结

本次案例还有所不足，比如没有点击播放按钮播放歌曲，以及进度条优化问题。在今后学习中会进行优化，希望你看完这篇文章有所收获。