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

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

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