css实现一个录音机旋转录音动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：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;
        height: 100vh;
  margin: 0;
  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.........完整代码请登录后点击上方下载按钮下载查看