svg+css实现粉色音乐播放器播放动画ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现粉色音乐播放器播放动画ui效果代码

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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']::-webki.........完整代码请登录后点击上方下载按钮下载查看