svg+css实现一个粉红色光盘播放器效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现一个粉红色光盘播放器效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
	--base:rgb(186,98,154);
/* 	--base:rgb(167,95,68); */
/* 	--base:rgb(184,64,102); */
	
	--r:184;
	--g:64;
	--b:102;
	
  --col00: rgb(calc(var(--r) - 100),0,0);
  --col0: rgb(calc(var(--r) - 50),calc(var(--g) - 50),calc(var(--b) - 50));
  --col1: rgb(calc(var(--r) - 40),calc(var(--g) - 40),calc(var(--b) - 40));
  --col2: rgb(calc(var(--r) - 30),calc(var(--g) - 30),calc(var(--b) - 30));
  --col3: rgb(calc(var(--r) - 20),calc(var(--g) - 20),calc(var(--b) - 20));
  --col4: rgb(calc(var(--r) - 10),calc(var(--g) - 10),calc(var(--b) - 10));
  --col5: rgb(var(--r),var(--g),var(--b));
  --col6: rgb(calc(var(--r) + 10),calc(var(--g) + 10),calc(var(--b) + 10));
  --col7: rgb(calc(var(--r) + 20),calc(var(--g) + 20),calc(var(--b) + 20));
  --col8: rgb(calc(var(--r) + 30),calc(var(--g) + 30),calc(var(--b) + 30));
  --col9: rgb(calc(var(--r) + 40),calc(var(--g) + 40),calc(var(--b) + 40));
  --col10: rgb(calc(var(--r) + 50),calc(var(--g) + 50),calc(var(--b) + 50));
  --col11: rgb(calc(var(--r) + 60),calc(var(--g) + 60),calc(var(--b) + 60));
  --col12: rgb(calc(var(--r) + 70),calc(var(--g) + 70),calc(var(--b) + 70));
  --col13: rgb(calc(var(--r) + 80),calc(var(--g) + 80),calc(var(--b) + 80));
}

/* 
rgb(191,200,243) 
rgb(0,9,76)
rgb(64,73,140)
rgb(128,137,204)
*/

body{
	margin:0 auto;
}

.bg{
	position:fixed;
	height:100%;
	width:100%;
	margin:0 auto;
	background: radial-gradient(var(--col11), var(--col1));
  background-repeat: no-repeat;
}

.recordContainer {
	z-index: 2;
	height: 200px;
	width: 200px;
	position: absolute;
	background-color: var(--col6);
	border:1px solid var(--col3);
	top: 40%;
	left: 48%;
	transform: translate(-50%, -50%);
	/* 	opacity:0; */
}

.armOrigin {
	height: 12.5%;
	width: 12.5%;
	border-radius: 3px;
	position: absolute;
	background-color: var(--col2);
	top: 9%;
	left: 67%;
}

.armOrigin > .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 80%;
	width: 80%;
	border-radius: 50%;
	background-color: var(--col3);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 4px solid var(--col4);
}

.armBody{
	position:absolute;
	top:15%;
	left:71%;
  background: var(--col12);
  width: 5%;
  height: 35%;
  transition: transform 500ms;
  transform-origin: top center;
	transform:rotate(-20deg);
	border-radius:0px 0px 999px 999px;
	box-shadow:0px 0px 20px rgba(0,0,0,0.8);
}

.armBody:before{
	content:'';
	position:absolute;
	top:-6%;
	left:0%;
  background-color: var(--col12);
  width: 100%;
  height: 50%;
	border-radius:999px;
}

.armBody:after{
	content:'';
	position:absolute;
	top:85%;
	left:50%;
  background-color: var(--col12);
  width: 100%;
  height: 40%;
  transform-origin: top left;
	transform:rotate(-320deg);
	border-radius:999px;
}

.headDot{
	position:absolute;
	top:112%;
	left:-84%;
  background-color: var(--col3);
  width: 50%;
  height: 7%;
	z-index:3;
	border-radius:50%;
}

.headSquare{
	position:absolute;
	top:104%;
	left:-124%;
  background-color: var(--col2);
  width: 130%;
  height: 20%;
/* 	z-index:3; */
	border-radius:2px;
	transform:rotate(-45deg);
}

.headSquare:after{
	content:'';
	position:absolute;
	top:-12%;
	left:50%;
	transform:translate(-50%,-50%);
  background-color: var(--col11);
  width: 80%;
  height: 25%;
	border-radius:2px;
	z-index:-1;
}

.controlsContainer{
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%,0%);
	width:100%;
	height:100%;
	background-color: inherit;
	border-left:1px solid var(--col4);
	border-right:1px solid var(--col4);
}

.btnContainer, .btnContainer2{
	height:100%;
	width:100%;
	position:absolute;
	text-align:center;
}

.btnContainer{
	top:30%;
}

.btnContainer2{
	top:60%;
}

.btnContainer > button, .btnContainer2 > button{
	position:relative;
	width:15%;
	height:15%;
	border-radius:100%;
	border:1.5px solid var(--col9);
	background-color: inherit;
	cursor:pointer;
	color: var(--col9);
}

.btnContainer > button:hover, .btnContainer2 > button:hover{
	opacity:0.5;
}

.slider{
	position:absolute;
	width:60%;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

.record{
	text-align:center;
	color:var(--col13);
	line-height:500%;
	position:absolute;
	top:50%;
	left:50%;
	height:60%;
	width:60%;
  transition: transform 500ms;
	transform:translate(-50%,-50%);
  transform-origin: center center;
	background-color:var(--col00);
/* 	background: url("https://assets.codepen.io/2045658/daft.png") no-repeat center; */
	background-size: 122px;
	border-radius:50%;
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
	font-size:0.8em;
}

/* dot in middle */
.record:before{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	height:10%;
	width:10%;
	transform:translate(-50%,-50%);
	background-color:var(--col5);
	border-radius:100%;
	border:4px solid var(--col13);
}

/* line on the outside of the record */
.startLine{
	position:absolute;
	top:50%;
	left:50%;
	height:80%;
	width:80%;
	transform:translate(-50%,-50%);
	background-color:rgba(255,255,255,0);
	border-radius:100%;
	border:1px solid var(--col6);
}

/* line on the inside of the record */
.endLine{
	position:absolute;
	top:50%;
	left:50%;
	height:30%;
	width:30%;
	transform:translate(-50%,-50%);
	background-color:rgba(255,255,255,0);
	border-radius:100%;
	border:1px solid var(--col6);
}

.rotating{
	animation:rotate 6s linear infinite
}

@keyframes rotate{
	0%{transform:translate(-50%,-50%) rotate(0deg)}
	100%{transform:translate(-50%,-50%) rotate(360deg)}
}

.records, .tracks{
	font-family:'Roboto', sans-serif;
	text-align:center;
	padding-top: 5px;
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: var(--col9);
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: var(--col3);
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: var(--co.........完整代码请登录后点击上方下载按钮下载查看