<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<title>音乐播放器</title>
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/戒不掉的烟.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.blurBG {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(50px);
transition: all 0.8s;
z-index: -2;
}
.player {
position: relative;
box-sizing: border-box;
}
/* 后代选择器 */
.player .playerOpe {
height: 80px;
width: 360px;
border-radius: 15px;
background-color: #fff;
display: flex;
justify-content: center;
z-index: 1;
}
.control i {
width: 40px;
height: 40px;
font-size: 25px;
color: #666;
cursor: pointer;
text-align: center;
line-height: 40px;
margin-top: 20px;
transition: all 0.3s;
}
i:hover {
border-radius: 30%;
background-color: #ccc;/* 背景变灰色 */
color: #eee;/* 元素变白色 */
}
.cover {
width: 100px;
height: 100px;
border-radius: 100%;
padding: 6px;
background-color: #fff;
margin-top: -50px;
background-size: cover;
animation: rotate1 5s infinite linear;
animation-play-state: running;
position: relative;
z-index: 2;
}
.cover img {
width: 100%;
border-radius: 100%;
}
.cover::before {/* 伪类元素 */
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.player .playerInf {
width: 90%;
height: 120%;
position: absolute;
top: -100%; /* 需要调整！！！ */
transform: translate(5%);
border-radius: 10px;
backdrop-filter: blur(80px);
background: #fff;
display: flex;
z-index: -1;
/* 毛玻璃效果 */
background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.playerInf .inf {
position: absolute;
left: 45%;
top: 8%;
width: 53%;
}
.inf .name {
font-size: 17px;
font-weight: 700;
}
.inf .singer_album {
font-size: 10px;
color: #555;
line-height: 15px;
}
.inf .progress {
width: 100%;
}
.progress .time {
font-size: 10px;
display: flex;
justify-content: space-between;
color: #f2709b;
line-height: 22px;
}
.progress .progress_bar {
width: 100%;
height: 3px;
background-color: #fff;
position: relative;
border-radius: 3px;
}
.progress_bar .progress_line {
width: 32%; /* 需要变化！！！ */
height: 3px;
position: absolute;
left: 0;
background-color: #f2709b;
border-radius: 3px;
}
.maskBG {
position: absolute;
left: 0;
top: 0;
width: 73%;
height: 100%;
background-color: rgba(0,0,0,0.5);
transition: all 0.8s;
z-index: 5;
display: none;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 27%;
height: 100%;
background-color: #fff;
}
.menu .title {
width: 90%;
height: 6%;
margin: auto;
display: flex;
justify-content: space-between;
font-size: 25px;
padding: 2%;
}
.title .close {
color: #666;
cursor: pointer;
transition: all 0.1s;
}
.close:hover {
transform: scale(1.1);
}
.menu .songs_list {
width: 90%;
height: calc(720px);
margin: auto;
padding: 0 2px;
overflow-y: auto;
overflow-x: hidden;
}
.songs_list .list {
width: 100%;
list-style: none;
padding-inline-start: 0px;
}
.list li {
padding: 10px 0;
border-bottom: 1px solid rgba(100,100,100,1);
justify-content: space-between;
display: flex;
}
li .choose {
font-size: 23px;
color: #f2709b;
cursor: pointer;
transition: all 0.1s;
}
.choose:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="player">
<!-- 操作界面 -->
<div class="playerOpe">
<!-- 歌曲封面 -->
<div class="cover">
<img src="img/戒不掉的烟.jpg" alt="封面">
</div>
<!-- 控制标识 -->
<div class="control">
<i class="fa fa-step-backward Backward"></i>
<i class="fa fa-play Play"></i>
<!-- <i class="fa fa-pause Plause"></i> -->
<i class="fa fa-step-forward Forward"></i>
<i class="fa fa-bars Bars"></i>
</div>
</div>
<!-- 信息界面 -->
<div class="playerInf">
<!-- 歌曲信息 -->
<div class="inf">
<div class="name">戒不掉的烟</div>
<div class="singer_album">烟（许佳豪）/超星</div>
<!-- 进度 -->
<div class="progress">
<!-- 时间 -->
<div class="time">
<span class="current_time">0:00</span>
<span class="total_time">03.08</span>
</div>
<!-- 进度条 -->
<div class="progress_bar">
<div class="progress_line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="blurBG"></div>
<div class="maskBG"></div>
<div class="menu">
<div class="title">
网易云播放器 用的时候不要用源代码 改一下歌词封面以及歌名
需积分: 5 131 浏览量
2023-12-19
10:24:38
上传
评论
收藏 793KB ZIP 举报
网易云播放器.zip （4个子文件） 
js img 
戒不掉的烟.jpg 231KB
123.png 334KB 戒不掉的烟.jpg 231KB css 
index.html 9KB资源评论
老谢0605
- 粉丝: 3
- 资源: 4
