① 黑色简约DJ播放器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑色播放器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{display:flex;align-items:center;justify-content:center;height:100vh;background:#111}
.player{width:300px;height:60px;background:#2d2d2d;border-radius:12px;display:flex;align-items:center;padding:0 16px;gap:10px;color:#fff}
button{width:34px;height:34px;border-radius:50%;border:2px solid #aaa;background:transparent;color:#fff}
.play{border-color:#fff}
.progress{flex:1;height:6px;background:#555;border-radius:3px}
.progress::after{content:"";display:block;width:40%;height:100%;background:#fff;border-radius:3px}
.time{font-size:12px}
</style>
</head>
<body>
<div class="player">
<button>⏮</button>
<button class="play">▶</button>
<div class="progress"></div>
<button>⏭</button>
<div class="time">00:00 / 03:45</div>
</div>
</body>
</html>
② 红白波形DJ播放器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色播放器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{display:flex;align-items:center;justify-content:center;height:100vh;background:#f4f4f4}
.player{width:300px;height:120px;background:#fff;border-radius:8px}
.wave{height:60px;background:linear-gradient(90deg,#ff4444,#222)}
.controls{height:60px;display:flex;align-items:center;padding:0 12px;gap:10px}
button{width:34px;height:34px;border-radius:50%;border:2px solid #333;background:transparent}
.loop{margin-left:auto;color:#888}
.time{font-size:12px}
</style>
</head>
<body>
<div class="player">
<div class="wave"></div>
<div class="controls">
<button>⏮</button>
<button>⏸</button>
<button>⏭</button>
<div class="loop">🔁</div>
<div class="time">00:00 / 05:52</div>
</div>
</div>
</body>
</html>
③ 绿白清新DJ播放器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绿色播放器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{display:flex;align-items:center;justify-content:center;height:100vh;background:#f8f8f8}
.player{width:300px;height:120px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:12px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
button{width:34px;height:34px;border-radius:50%;border:2px solid #888;background:transparent;color:#888}
.play{border-color:#4CAF50;color:#4CAF50}
.time{margin-left:auto;font-size:12px;color:#666}
.bottom{display:flex;gap:6px}
.bottom button{flex:1;height:32px;border:1px solid #eee;border-radius:4px;color:#4CAF50;font-size:12px}
</style>
</head>
<body>
<div class="player">
<div class="top">
<button>⏮</button>
<button class="play">⏸</button>
<button>⏭</button>
<div class="time">00:33 / 1:39:10</div>
</div>
<div class="bottom">
<button>⭐ 收藏舞曲</button>
<button>⬇️ 舞曲下载</button>
<button>🐧 报错反馈</button>
</div>
</div>
</body>
</html>