使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)_网页音乐播放器源代码

margin: auto;

display: flex;

justify-content: center;

align-items: center;

height: 60px;

font-size: 30px;

}

.controls span{

display: none;

opacity: 0;

transition: 1s;

}

.music-player-section.active .controls{

justify-content: space-between;

}

.music-player-section.active .controls span{

font-size: 25px;

display: block;

opacity: 0.5;

}

.music-player-section.active .controls span.active{

color: var(–primary-color);

opacity: 1;

}

.controls .main i{

margin: 0 5px;

display: none;

}

.controls .main i.active{

display: inline;

}

现在让我们创建最大化视图的样式。

.music-player-section .hide{

display: none;

opacity: 0;

transition: 1s;

}

.music-player-section.active .hide{

display: block;

opacity: 1;

}

.music-player-section.active{

width: 100%;

height: 100%;

padding: 30px;

display: flex;

flex-direction: column;

}

.music-player-section.active .music-seek-bar{

position: relative;

display: block;

border-radius: 50px;

margin: auto;

}

.music-player-section.active .current-song-name{

font-size: 40px;

}

.music-player-section.active .controls{

width: 100%;

font-size: 50px;

}

.artist-name{

text-align: center;

font-size: 20px;

text-transform: capitalize;

}

.cover{

width: 30vh;

height: 30vh;

object-fit: cover;

margin: auto;

border-radius: 20px;

box-shadow: var(–shadow);

}

.current-time{

position: absolute;

margin-top: 5px;

left: 30px;

}

.duration{

position: absolute;

margin-top: 5px;

right: 30px;

}

.icon{

position: absolute;

top: 60px;

transform: scale(1.3);

}

.back-btn{

left: 40px;

}

.nav-btn{

right: 40px;

}

/* volume button */

.volume-slider{

-webkit-appearance: none;

width: 100px;

height: 40px;

position: absolute;

right: -35px;

bottom: 80px;

transform: rotate(-90deg);

border-radius: 20px;

background: var(–alpha-color);

overflow: hidden;

opacity: 0;

display: none;

}

.volume-slider.active{

opacity: 1;

display: block;

}

.volume-slider::-webkit-slider-thumb{

-webkit-appearance: none;

height: 40px;

width: 10px;

background: var(–primary-color);

box-shadow: -200px 0 1px 200px var(–primary-color);

}

输出

并检查这些样式，现在像这样将active添加到 class music-player-section 中去。

…

输出

我们最终会让这个播放器发挥作用。现在从player section类删除这个active。让我们创建播放列表部分。