CSS样式效果 👕
那么接下来，我们就根据这个HTML样式结构，来书写CSS样式~
容器player元素样式 ☂️
首先我们定义外部最大的容器元素player 的样式结构
如下
.player {
width: 500px; /*定义宽度*/
height: 520px; /*定义高度*/
padding: 40px; /*定义内边距*/
background: linear-gradient(135deg, #4158d0, #c850c0, #ffcc70); /*定义背景颜色 */
border-radius: 10px; /*定义圆角*/
text-align: center; /*定义文字整体居中*/
color: #fff; /*定义文字颜色*/
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /*定义阴影*/
position: relative; /*定义相对定位*/
overflow: hidden; /*定义超出其宽高范围的内容被隐藏*/
margin: 100px auto; /*定义外边距 让其居中*/
}
那么现在效果如下
如图
嗯，这样有点那意思了~👨🏼💻 但还要继续优化CSS~
继续给这个player元素加点CSS样式
如下
.player::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 70%);
pointer-events: none;
}
这段代码的意思我是想通过伪元素给.player这个容器添加一个绝对定位的半透明径向渐变层，
注意这里可能有些朋友对background:radial-gradient和pointer-events: none;两个属性不是很了解，这里简单说明一下!
background:radial-gradient中的radial-gradient()函数可以用来创建一个图像, 而且这个图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成~形状可以是圆形circle和椭圆形ellipse与其它渐变相同，径向渐变是一个不固定尺寸的图像，也就是说它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定! 所以我这里设置从容器的30% 20%位置向外呈现由浅白透明到完全透明的圆形渐变效果~
pointer-events: none属性让该渐变层不遮挡下方元素的交互
加了之后效果如下
如图
而这个半透明径向渐变层我使用了::before把这个内容加在了player容器内部内容之前
我们也可以使用审查元素看到这个元素~
如图
这样整体为播放器容器增加通透的光影质感~ 当然这一段代码你也可以不用加，纯属个人审美加入~
头部文本样式 🧣
接着，我们对容器内部的文字元素:.player-title、.player-subtitle、.music-info进行样式的设计
代码如下
/*播放器名*/
.player-title {
font-size: 30px;
margin-top: 50px;
letter-spacing: 3px;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/*播放器描述*/
.player-subtitle {
font-size: 14px;
opacity: 0.7;
margin: 10px 0 50px;
letter-spacing: 1px;
color: #eee;
}
/*音乐名称描述*/
.music-info {
margin-bottom: 20px;
font-size: 18px;
color: #fff;
opacity: 0.9;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
这里我给文本添加了一些阴影，以及描述字幕的透明度等样式~
效果如下
播放器按钮样式 🦖
这个部分的CSS样式也是本例中比较多的地方~
首先，我把所有的按钮，都放到了一个.btn-group的元素容器里面~ 然后设置样式
如下
.btn-group {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
}
这里我们使用到了Flexbox弹性盒子布局~ 不明白什么事弹性布局的，赶紧去补习一下~
display:flex 让容器内的按钮等元素横向排列
justify-content:center 让这些元素在容器水平方向居中
align-items:center 让元素在垂直方向居中
gap:15px给元素之间留15像素的间距
margin-top:20px 让容器整体距离上方元素有 20 像素的距离~
效果如下
然后我们就可以很方便的去挨个操作里面的按钮样式了~
使用.player-btn来统一所有按钮的样式
代码如下
.player-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #fff;
background: transparent;
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.player-btn:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
这里我们要注意最后的弹性布局, 设置display:flex、justify-content:center、align-items:center 是为了让按钮内部的内容水平垂直居中~
同时我们设置了transition:all 0.3s的一个动画，让按钮所有样式变化都有 0.3 秒的过渡效果
整体就是做出一个45px 大小、白色边框、透明背景、内容居中然后鼠标移上去有手型且样式变化, 更顺滑的圆形播放按钮~
效果如下
最后我们还可以对一些特别想要处理的按钮进行单独CSS调整
例如
/*单独调整暂停播放键按钮*/
.player-btn.play-pause {
width: 60px;
height: 60px;
background: #00e5ff;
border-color: #00e5ff;
color: #182848;
font-size: 20px;
box-shadow: 0 0 15px #00e5ff;
}
/*单独调整重置按钮*/
.player-btn.reset-btn {
font-size: 12px;
}
/*单独调整快进快退按钮*/
.player-btn.speed-btn {
font-size: 14px;
}
效果如下
播放器进度条HTML结构与CSS样式 🪴
写到这里，我感觉这个播放器差点意思，仔细一看，没有音乐播放的进度条~ 🦊
所以我们这里还需要给播放器加上一个进度条的HTML+CSS结构~
HTML代码如下
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar">
<div class="progress-dot"></div>
</div>
</div>
在这里我们创建了3层嵌套的容器!
外层是: class为 progress-container id为 progressContainer是进度条整体容器~
中间层: class为 progress-bar id 为 progressBar 是进度条主体容器
最内层是 class为progress-dot的进度条滑块/圆点容器
我们的目的是为了创建一个带滑块的进度条结构，通过不同层级容器分别控制进度条整体、来完成进度部分和可拖动的圆点滑块的样式与交互处理!
结构梳理清楚了，那样式自然也就简单了~
首先是进度条外层样式
CSS代码如下
/*进度条外层样式*/
.progress-container {
width: 85%;
height: 3px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin: 0 auto 50px;
cursor: pointer;
position: relative;
}
如图
然后是进度条中间层样式
CSS代码如下
/*进度条中间层样式*/
.progress-bar {
height: 100%;
background: #00e5ff;
border-radius: 2px;
width: 0%;
position: relative;
box-shadow: 0 0 8px #00e5ff;
}
这里中间层的代码其实很关键，progress-bar设置分析：
height:100% 让它高度和父容器一致
background:#00e5ff 设置背景为亮青色!
border-radius:2px 给它2像素的圆角
width:0% 初始宽度为 0, 这个属性为什么要这样设置,我们可以观察一下控制台的效果!
如图
看到了吧, 我们后续可通过js调整显示进度, 来显示颜色效果进度~ 怎么样我是不是个大聪明~ 🦞嘿嘿~
position:relative 为内部圆点定位做参考准备!~
box-shadow:0 0 8px #00e5ff 给它加亮青色的发光阴影
最后整体是做出一个初始宽度为0、高度铺满父容器、带圆角和发光效果的亮青色进度条主体来呈现显示音频的播放进度!
最后是进度条最内层样式
CSS代码如下
/*进度条 滑块样式*/
.progress-dot {
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #00e5ff;
}
这里就是设置进度条的圆点滑块progress-dot类的设置样式：
position:absolute 让它基于父容器绝对定位
right:-6px 使它在进度条主体右侧偏移6像素
top:50%和transform:translateY (-50%)让滑块垂直居中
width:15px和height:15px 设置宽高为15像素
background:#fff设为白色背景
border-radius:50% 变成圆形
box-shadow:0 0 10px #00e5ff 加亮青色发光阴影
最后整体是做出一个白色圆形、带亮青色发光效果、精准定位在进度条右端且垂直居中的滑块, 用于标识进度条当前位置, 以及后期提供给用户进行拖拽~
到这里，我们的播放器UI界面就算是大功告成了~
整体的CSS代码如下
.player {
width: 500px;
height: 520px;
padding: 40px;
background: linear-gradient(135deg, #4158d0, #c850c0, #ffcc70);
border-radius: 10px;
text-align: center;
color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
margin: 100px auto;
}
/*光影质感*/
.player::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 70%);
pointer-events: none;
}
/*播放器名*/
.player-title {
font-size: 30px;
margin-top: 50px;
letter-spacing: 3px;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/*播放器描述*/
.player-subtitle {
font-size: 14px;
opacity: 0.7;
margin: 10px 0 50px;
letter-spacing: 1px;
color: #eee;
}
/*音乐名称描述*/
.music-info {
margin-bottom: 20px;
font-size: 18px;
color: #fff;
opacity: 0.9;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/*按钮容器 弹性布局*/
.btn-group {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
}
/*统一按钮样式+弹性布局*/
.player-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #fff;
background: transparent;
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.player-btn:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/*单独调整暂停播放键按钮*/
.player-btn.play-pause {
width: 60px;
height: 60px;
background: #00e5ff;
border-color: #00e5ff;
color: #182848;
font-size: 20px;
box-shadow: 0 0 15px #00e5ff;
}
/*单独调整重置按钮*/
.player-btn.reset-btn {
font-size: 12px;
}
/*单独调整快进快退按钮*/
.player-btn.speed-btn {
font-size: 14px;
}
/*进度条外层样式*/
.progress-container {
width: 85%;
height: 3px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin: 0 auto 50px;
cursor: pointer;
position: relative;
}
/*进度条中间层样式*/
.progress-bar {
height: 100%;
background: #00e5ff;
border-radius: 2px;
width: 0%;
position: relative;
box-shadow: 0 0 8px #00e5ff;
}
/*进度条 滑块样式*/
.progress-dot {
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #00e5ff;
}
/*隐藏原始音频元素*/
#audio {
display: none;
}
注意: 原始的音频播放元素，我们要隐藏起来
最终的UI效果如下~
如图
HTML+CSS我们就写到这里了，如果你还不满意，可以自行对它进行扩展美化~
接下来，就正式进入到JS代码交互功能实现的阶段了~
