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
}
.disc.is-scratching {
	cursor:grabbing
}
.disc__que {
	--dim:10px;
	position:absolute;
	top:50%;
	right:30px;
	width:var(--dim);
	height:var(--dim);
	background:var(--color-theme);
	border-radius:50%
}
.disc__label {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	width:calc(var(--disc-dimension) * .4);
	height:calc(var(--disc-dimension) * .4);
	background:no-repeat url(//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png) center center;
	background-size:cover;
	border-radius:50%;
	pointer-events:none
}
.disc__middle {
	--dim:10px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:var(--dim);
	height:var(--dim);
	background:rgb(26,26,26);
	border-radius:50%
}
.disc__glare {
	width:var(--disc-dimension);
	height:15%;
	position:absolute;
	top:50%;
	transform:translateY(-50%) rotate(-30deg);
	background:rgba(255,255,255,.15);
	filter:.........完整代码请登录后点击上方下载按钮下载查看