<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>html5+css3简洁大气MP3音乐播放器代码</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="player">
<div class="player__header">
<div class="player__img player__img--absolute slider">
<button class="player__button player__button--absolute--nw playlist">
<img src="svg/playlist.svg" alt="playlist-icon">
</button>
<button class="player__button player__button--absolute--center play">
<img src="svg/play.svg" alt="play-icon">
<img src="svg/pause.svg" alt="pause-icon">
</button>
<div class="slider__content">
<img class="img slider__img" src="img/1.jpg" alt="cover">
<img class="img slider__img" src="img/2.jpg" alt="cover">
<img class="img slider__img" src="img/3.jpg" alt="cover">
<img class="img slider__img" src="img/4.jpg" alt="cover">
<img class="img slider__img" src="img/5.jpg" alt="cover">
<img class="img slider__img" src="img/6.jpg" alt="cover">
<img class="img slider__img" src="img/7.jpg" alt="cover">
</div>
</div>
<div class="player__controls">
<button class="player__button back">
<img class="img" src="svg/back.svg" alt="back-icon">
</button>
<p class="player__context slider__context">
<strong class="slider__name"></strong>
<span class="player__title slider__title"></span>
</p>
<button class="player__button next">
<img class="img" src="svg/next.svg" alt="next-icon">
</button>
<div class="progres">
<div class="progres__filled"></div>
</div>
</div>
</div>
<ul class="player__playlist list">
<li class="player__song">
<img class="player__img img" src="img/1.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">no time</b>
<span class="flex">
<span class="player__title">lastlings</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/1.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/2.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">blinding lights</b>
<span class="flex">
<span class="player__title">the weeknd</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/2.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/3.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">джованна</b>
<span class="flex">
<span class="player__title">enrasta</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/3.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/4.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">a man</b>
<span class="flex">
<span class="player__title">travis scott</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/4.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/5.jpg" alt="cover">
<p class="player__context ">
<b class="player__song-name">unforgetting</b>
<span class="flex">
<span class="player__title">zaxx</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/5.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/6.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">waharan</b>
<span class="flex">
<span class="player__title">Randall</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/6.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/7.jpg" alt="cover">
<p class="player__context ">
<b class="player__song-name">starlight feat mr gabriel <span class="uppercase">4am</span> remix</b>
<span class="flex">
<span class="player__title">jai wolf</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="https://physical-authority.surge.sh/music/7.mp3"></audio>
</li>
</ul>
</div>
<script src="js/script.js"></script>
</body>
</html>
html5+css3简洁大气MP3音乐播放器代码.zip
版权申诉
11 浏览量
2023-09-26
01:42:48
上传
评论
收藏 129KB ZIP 举报
html5+css3简洁大气MP3音乐播放器代码.zip （15个子文件） 
svg 
playlist.svg 1000B back.svg 669B play.svg 532B pause.svg 695B next.svg 672B js 
script.js 6KB img 
2.jpg 19KB 6.jpg 12KB 1.jpg 17KB 5.jpg 17KB 3.jpg 19KB 7.jpg 10KB 4.jpg 28KB css style.css 6KB
index.html 5KB资源评论
