这段 HTML 和 CSS 代码实现了一个音乐播放器的界面，包含歌曲信息、播放控制、音量调节、播放进度等功能。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e8e8e8;
}
.card {
position: relative;
min-width: 250px;
min-height: 120px;
background: #191414;
border-radius: 10px;
padding: .8rem;
display: flex;
flex-direction: column;
gap: .5rem;
box-shadow: 0 10px 40px -25px rgba(100, 100, 100, .5);
}
.top {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
margin-block-end: .5rem;
}
.pfp {
position: relative;
height: 40px;
width: 40px;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.title-1 {
color: white;
font-size: 1.25rem;
font-weight: 900;
}
.title-2 {
color: white;
font-size: .75rem;
opacity: .8;
}
/* new */
.song-time {
width: 100%;
margin-inline: auto;
position: relative;
display: flex;
align-items: center;
gap: .3rem;
}
.time {
width: 90%;
background-color: #5e5e5e;
height: .35rem;
border-radius: 3px;
}
.elapsed {
width: 42%;
background-color: #1db954;
height: 100%;
border-radius: 3px;
}
.controls {
color: white;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
.volume {
height: 100%;
width: 48px;
}
.air {
height: 100%;
width: 48px;
}
.controls svg {
cursor: pointer;
transition: 0.1s;
}
.controls svg:hover {
color: #1db954;
}
.controls .heart:hover {
color: pink;
}
.volume {
opacity: 0;
position: relative;
transition: 0.2s;
}
.volume .slider {
height: 4px;
background-color: #5e5e5e;
width: 80%;
border-radius: 2px;
margin-left: .3rem;
}
.volume .slider .green {
background-color: #1db954;
height: 100%;
width: 80%;
border-radius: 3px;
}
.volume .circle {
background-color: white;
height: 6px;
width: 6px;
border-radius: 3px;
position: absolute;
right: 20%;
top: 50%;
transform: translateY(-50%);
}
.volume_button:hover~.volume {
opacity: 1;
}
.timetext {
color: white;
}
.time_now {
font-size: .8rem;
background-color: #00000060;
padding: .5rem;
border-radius: .5rem;
background-blend-mode: multiply;
}
.time_full {
font-size: .8rem;
background-color: #00000060;
padding: .5rem;
border-radius: .5rem;
background-blend-mode: multiply;
}
.playing {
display: flex;
position: relative;
justify-content: center;
gap: 1px;
width: 30px;
height: 20px;
}
.greenline {
background-color: #1db954;
height: 20px;
width: 2px;
position: relative;
transform-origin: bottom;
}
.line-1 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.2s;
}
.line-2 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.5s;
}
.line-3 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.6s;
}
.line-4 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0s;
}
.line-5 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.4s;
}
@keyframes playing {
0% {
transform: scaleY(0.1);
}
33% {
transform: scaleY(0.6);
}
66% {
transform: scaleY(0.9);
}
100% {
transform: scaleY(0.1);
}
}
</style>
</head>
<body>
<div class="card">
<div class="top">
<div class="pfp">
<div class="playing">
<div class="greenline line-1"></div>
<div class="greenline line-2"></div>
<div class="greenline line-3"></div>
<div class="greenline line-4"></div>
<div class="greenline line-5"></div>
</div>
</div>
<div class="texts">
<p class="title-1">Soldiers Rage</p>
<p class="title-2">Tha Mechanic</p>
</div>
</div>
<div class="controls">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="24"
class="volume_button">
<path clip-rule="evenodd"
d="M11.26 3.691A1.2 1.2 0 0 1 12 4.8v14.4a1.199 1.199 0 0 1-2.048.848L5.503 15.6H2.4a1.2 1.2 0 0 1-1.2-1.2V9.6a1.2 1.2 0 0 1 1.2-1.2h3.103l4.449-4.448a1.2 1.2 0 0 1 1.308-.26Zm6.328-.176a1.2 1.2 0 0 1 1.697 0A11.967 11.967 0 0 1 22.8 12a11.966 11.966 0 0 1-3.515 8.485 1.2 1.2 0 0 1-1.697-1.697A9.563 9.563 0 0 0 20.4 12a9.565 9.565 0 0 0-2.812-6.788 1.2 1.2 0 0 1 0-1.697Zm-3.394 3.393a1.2 1.2 0 0 1 1.698 0A7.178 7.178 0 0 1 18 12a7.18 7.18 0 0 1-2.108 5.092 1.2 1.2 0 1 1-1.698-1.698A4.782 4.782 0 0 0 15.6 12a4.78 4.78 0 0 0-1.406-3.394 1.2 1.2 0 0 1 0-1.698Z"
fill-rule="evenodd"></path>
</svg>
<div class="volume">
<div class="slider">
<div class="green"></div>
</div>
<div class="circle"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
<path clip-rule="evenodd"
d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm.848-12.352a1.2 1.2 0 0 0-1.696-1.696l-3.6 3.6a1.2 1.2 0 0 0 0 1.696l3.6 3.6a1.2 1.2 0 0 0 1.696-1.696L11.297 13.2H15.6a1.2 1.2 0 1 0 0-2.4h-4.303l1.551-1.552Z"
fill-rule="evenodd"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
<path clip-rule="evenodd"
d="M21.6 12a9.6 9.6 0 1 1-19.2 0 9.6 9.6 0 0 1 19.2 0ZM8.4 9.6a1.2 1.2 0 1 1 2.4 0v4.8a1.2 1.2 0 1 1-2.4 0V9.6Zm6-1.2a1.2 1.2 0 0 0-1.2 1.2v4.8a1.2 1.2 0 1 0 2.4 0V9.6a1.2 1.2 0 0 0-1.2-1.2Z"
fill-rule="evenodd"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
<path clip-rule="evenodd"
d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm4.448-10.448-3.6-3.6a1.2 1.2 0 0 0-1.696 1.696l1.551 1.552H8.4a1.2 1.2 0 1 0 0 2.4h4.303l-1.551 1.552a1.2 1.2 0 1 0 1.696 1.696l3.6-3.6a1.2 1.2 0 0 0 0-1.696Z"
fill-rule="evenodd"></path>
</svg>
<div class="air"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" class="heart" stroke="currentColor" fill="none" height="20" width="24">
<path
d="M3.343 7.778a4.5 4.5 0 0 1 7.339-1.46L12 7.636l1.318-1.318a4.5 4.5 0 1 1 6.364 6.364L12 20.364l-7.682-7.682a4.501 4.501 0 0 1-.975-4.904Z">
</path>
</svg>
</div>
<div class="song-time">
<p class="timetext time_now">1:31</p>
<div class="time">
<div class="elapsed"></div>
</div>
<p class="timetext time_full">3:46</p>
</div>
</div>
</body>
</html>HTML 结构
- card：整个音乐播放器的容器，包含所有功能模块。
- top：显示歌曲的封面 pfp 和歌曲信息 texts。
- pfp：歌曲封面容器，包含一个"播放中"动画 playing。
- texts：显示歌曲标题 title-1 和艺术家名称 title-2。
- controls：播放控制区域，包含音量控制、播放/暂停按钮、上一首/下一首按钮和收藏按钮。
- volume_button：音量按钮，点击后显示音量滑块。
- volume：音量滑块，包含滑块轨道 slider 和滑块圆点 circle。
- 其他 svg>元素：分别用于控制上一首、播放/暂停、下一首和收藏功能。
- song-time：显示歌曲的播放进度条和时间信息。
- timetext time_now：当前播放时间。
- time：进度条容器，包含已播放部分 elapsed。
- timetext time_full：歌曲总时长。
CSS 样式
- body：设置页面的整体布局，使卡片居中显示，背景颜色为浅灰色（#e8e8e8）。
- .card：定义卡片的样式，包括最小宽度、高度、背景颜色、圆角、内边距、阴影和子元素的排列方式。
- .top：定义歌曲封面和信息的布局，包含水平排列的封面和文本。
- .pfp：定义歌曲封面的样式，包括背景颜色、圆角和内部的"播放中"动画。
- .title-1：定义歌曲标题的样式，包括字体颜色、大小和加粗。
- .title-2：定义艺术家名称的样式，包括字体颜色、大小和透明度。
- .song-time：定义播放进度条和时间信息的布局，包含水平排列的当前时间、进度条和总时间。
- .time：定义进度条的样式，包括背景颜色和高度。
- .elapsed：定义已播放部分的样式，背景颜色为绿色（#1db954）。
- .controls：定义播放控制区域的样式，包含水平排列的按钮和音量滑块。
- .volume：定义音量滑块的样式，包括透明度、滑块轨道和滑块圆点。
- .volume_button:hover~.volume：当鼠标悬停在音量按钮上时，显示音量滑块。
- .controls svg：定义按钮的样式，包括鼠标悬停时的颜色变化。
- .controls .heart:hover：定义收藏按钮鼠标悬停时的颜色变化。
- .timetext：定义时间文本的样式，包括字体颜色。
- .time_now 和 .time_full：定义当前时间和总时间的样式，包括背景颜色和圆角。
- .playing：定义"播放中"动画的样式，包含多个绿色线条。
- .greenline：定义绿色线条的样式，包括背景颜色、高度和动画效果。
- @keyframes playing：定义动画，使绿色线条动态变化高度，模拟播放效果。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！