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

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

代码语言：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-col.........完整代码请登录后点击上方下载按钮下载查看