js实现可拖拽快进快退老式碟片音乐播放器效果代码-html代码-BFW代码库

js实现可拖拽快进快退老式碟片音乐播放器效果代码

代码语言：html

所属分类：多媒体

代码描述：js实现可拖拽快进快退老式碟片音乐播放器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
	--color-theme:rgb(2,176,236);
	--color-record-center:#fff;
	--color-record-inner:#131313;
	--color-record-groove:#000;
	--color-record-outer:#000;
	--spacing-groove:10%;
	--font-family:"Poppins",cursive;
	--turntable-height:clamp(300px,90vmin,500px);
	--disc-dimension:calc(var(--turntable-height) * .9)
}
html {
	box-sizing:border-box
}
*,*:before,*:after {
	box-sizing:inherit
}
html,body {
	margin:0;
	padding:0
}
body {
	width:100%;
	height:100vh;
	overflow:hidden;
	overscroll-behavior:contain
}
.layout {
	width:100vw;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center
}
.turntable {
	height:var(--turntable-height);
	display:inline-flex;
	gap:1rem;
	padding:calc(var(--turntable-height) * .05);
	background:rgb(233,233,233);
	border-radius:3px;
	box-shadow:12px 14px 18px 2px #a6a1a17f
}
.disc-container {
	aspect-ratio:1;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	border:2px solid #000;
	background:linear-gradient(45deg,rgb(255,255,255),rgb(66,66,66))
}
.disc {
	position:relative;
	aspect-ratio:1;
	width:91%;
	overflow:hidden;
	border-radius:50%;
	background:repeating-radial-gradient(var(--color-record-inner),var(--color-record-groove) 2px,var(--color-record-groove) 2px,var(--color-record-inner) 4px);
	cursor:grab
}.........完整代码请登录后点击上方下载按钮下载查看