新增第141个小实例：迷你音乐播放器
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
c820808ee2
commit
f2ca24efde
|
|
@ -147,4 +147,5 @@
|
|||
137. HTML5+CSS3+Vue小实例：仿制腾讯视频的轮播图
|
||||
138. HTML5+CSS3小实例：月步式的loading加载动画
|
||||
139. HTML5+CSS3小实例：卡片悬停图文遮罩显示特效
|
||||
140. HTML5+CSS3+JS小实例：ANIME搭配SVG实现简约酷炫的登录界面
|
||||
140. HTML5+CSS3+JS小实例：ANIME搭配SVG实现简约酷炫的登录界面
|
||||
141. HTML5+CSS3+JS小实例：迷你音乐播放器
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container{
|
||||
width: 430px;
|
||||
height: 100px;
|
||||
}
|
||||
/* 模糊背景图 */
|
||||
.bg{
|
||||
/* 固定定位 */
|
||||
position: fixed;
|
||||
top: -40px;
|
||||
right: -40px;
|
||||
bottom: -40px;
|
||||
left: -40px;
|
||||
background: url(/mp3/cover/红模仿.jpg) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* 模糊滤镜 */
|
||||
filter: blur(40px);
|
||||
z-index: 1;
|
||||
}
|
||||
/* 半透明白色遮罩层 */
|
||||
.bg-mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(255,255,255,0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
.player{
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 歌曲信息轨道区域 */
|
||||
.player-track{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
left: 15px;
|
||||
padding: 13px 22px 10px 184px;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
border-radius: 15px 15px 0 0;
|
||||
/* 改变top时的过渡效果 */
|
||||
transition: top 0.3s ease;
|
||||
}
|
||||
/* 歌曲信息轨道区域活动态 */
|
||||
.player-track.active{
|
||||
/* 上移 */
|
||||
top: -95px;
|
||||
}
|
||||
.album-name{
|
||||
color: #333;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.track-name{
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
margin: 3px 0 12px 0;
|
||||
}
|
||||
.track-time{
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.current-time,
|
||||
.total-time{
|
||||
color: #ff668f;
|
||||
font-size: 11px;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.current-time{
|
||||
float: left;
|
||||
}
|
||||
.total-time{
|
||||
float: right;
|
||||
}
|
||||
/* 播放进度区域 */
|
||||
.progress-box{
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background-color: #ead2d7;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 悬停进度条显示时间 */
|
||||
.hover-time{
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
/* 悬停进度条颜色 */
|
||||
.hover-bar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 已播放的进度条颜色 */
|
||||
.progress-bar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fd6d94;
|
||||
border-radius: 4px;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
/* 改变width时的过渡效果 */
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
.player-content{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
z-index: 2;
|
||||
box-shadow: 0 30px 80px #656565;
|
||||
}
|
||||
/* 封面 */
|
||||
.album-cover{
|
||||
width: 115px;
|
||||
height: 115px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 40px;
|
||||
box-shadow: 0 0 0 10px #fff;
|
||||
overflow: hidden;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
/* 唱片中间的小圆点 */
|
||||
.album-cover::before{
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #d6dee6;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
margin: -10px auto auto auto;
|
||||
box-shadow: inset 0 0 0 2px #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 封面活动态 */
|
||||
.album-cover.active{
|
||||
top: -60px;
|
||||
box-shadow: 0 0 0 4px #fff7f7,
|
||||
0 30px 50px -15px #afb7c1;
|
||||
}
|
||||
.album-cover img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0;
|
||||
}
|
||||
.album-cover img.active{
|
||||
opacity: 1;
|
||||
}
|
||||
/* 播放时封面旋转 */
|
||||
.album-cover.active img.active{
|
||||
/* 执行动画：动画名 时长 线性的 无限次播放 */
|
||||
animation: rotateAlbumCover 3s linear infinite;
|
||||
}
|
||||
/* 控制区 */
|
||||
.play-controls{
|
||||
width: 255px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.control{
|
||||
flex: 1;
|
||||
}
|
||||
.control .button{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
.control .button i{
|
||||
color: #d6dee6;
|
||||
font-size: 30px;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
.control .button:hover{
|
||||
background-color: #d6d6de;
|
||||
}
|
||||
.control .button:hover i{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes rotateAlbumCover {
|
||||
0%{
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100%{
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>迷你音乐播放器</title>
|
||||
<!-- 字体图标库 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="141.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="bg"></div>
|
||||
<div class="bg-mask"></div>
|
||||
<div class="player">
|
||||
<div class="player-track">
|
||||
<div class="album-name">红模仿</div>
|
||||
<div class="track-name">周杰伦 - 红模仿</div>
|
||||
<div class="track-time">
|
||||
<div class="current-time">00:00</div>
|
||||
<div class="total-time">03:50</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<div class="hover-time">00:36</div>
|
||||
<div class="hover-bar"></div>
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-content">
|
||||
<div class="album-cover">
|
||||
<img src="/mp3/cover/红模仿.jpg" alt="" class="active">
|
||||
<img src="/mp3/cover/感官先生.jpg" alt="">
|
||||
<img src="/mp3/cover/夜曲.jpg" alt="">
|
||||
<img src="/mp3/cover/我的名字.jpg" alt="">
|
||||
<img src="/mp3/cover/本草纲目.jpg" alt="">
|
||||
</div>
|
||||
<div class="play-controls">
|
||||
<div class="control">
|
||||
<div class="button play-prev">
|
||||
<i class="fa fa-step-backward"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="button play-pause">
|
||||
<i class="fa fa-play"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="button play-next">
|
||||
<i class="fa fa-step-forward"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="141.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// 要操作的元素
|
||||
let play_pause=document.querySelector('.play-pause');
|
||||
let player_track=document.querySelector('.player-track');
|
||||
let album_cover=document.querySelector('.album-cover');
|
||||
|
||||
// 播放暂停
|
||||
function playPause(){
|
||||
if(player_track.classList.contains('active')){
|
||||
player_track.classList.remove('active');
|
||||
play_pause.querySelector('.fa').classList='fa fa-play';
|
||||
album_cover.classList.remove('active');
|
||||
}else{
|
||||
player_track.classList.add('active');
|
||||
play_pause.querySelector('.fa').classList='fa fa-pause';
|
||||
album_cover.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定播放暂停按钮的点击事件
|
||||
play_pause.addEventListener('click',playPause);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue