css实现磁带录音机动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现磁带录音机动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *:after, *:before{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}
        
        body {
          background: #58c5c9;
          font-family: arial;
          margin: 0;
          padding: 0;
        }
          
          /* artboard container */
            .container{padding:10% 0 0; width:12em; margin:0 auto}
            
            .container *{border:2px solid #fff;}
            
          /* main container */
            .main{
              height:10em;
              padding:.5em;
              position:relative;
              width:8.625em;
            }
          
          /* Main Areas 2(top) & 3(bottom) */
            .m2, .m3{
              position:relative;
              width:100%;
            }
           
        
            .m2{
             border-bottom:0;
             height:53%
            }
            
            
            /* Small Circles */
              .mini-Circle.mcBig{
                border-radius:300px;
                height:.725em;
                margin:.5em auto;
                width:.725em
              }
            
              .mc1, .mc2{
                position:absolute;
                top:4%;
              }
            
              .mc1{left:-1em}
              .mc2{right:-1em}
              .mcBig{
                bottom:-.66em;
                position:absolute;
                right:-1.2em;
              }
            
            /* Boxes */
              .rec{
                bottom:.2em;
                height:1.875em;
                left:32.5%;
                position:absolute;
                width:2.5em;
              }
              
              .sRec{
                bottom:.2em;
                left:.3em;
                height:.55em;
                position:absolute;
                width:1em;
              }
            
            /* Tape Lines */
              .line{
                background:#fff;
                border:0;
                height:.1875em;
                position:absolute;
              }
              
              .line-Left{
                left:-2.05em;
                -moz-transform:rotate(40deg);
                -webkit-transform:rotate(40deg);
                transform:rotate(40deg);
                top:.4em;
                width:1.3em
              }
              
              .line-Left2{
                left:-.4em;
                top:.76em;
                width:.4em;
              }
              
              .line-Right{
                right:-.64em;
                top:1.25em;
                -moz-transform:rotate(-32deg);
                -webkit-transform:rotate(-32deg);
                transform:rotate(-32deg);
                width:.6em;
              }
              
              .line-Right2{
                right:-1.66em;
                -moz-transform:rotate(-40deg);
                -webkit-transform:rotate(-40deg);
                transform:rotate(-40deg);
                top:.25em;
                width:1em
              }
            
        
            
            .m3{
              height:47%;
            }
            
            .circle{
              background:#58c5c9;
              border-radius:500px;
              height:5.25em;
              position:absolute;
              top:-1.926em;
              width:5.25em;
              z-index:3;
              
              -moz-animation:rotate 5s infinite linear;
              -webkit-animation:rotate 5s infinite linear;
              animation:rotate 5s infinite linear
        
            }
            
            
            @-moz-keyframes rotate{
              from {
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg)
              }
              
              to {
                -moz-transform:rotate(360deg);
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg)
              }
            }
            @-webkit-keyframes rotate{
              from {
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg)
              }
              
              to {
                -moz-transform:rotate(360deg);
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg)
              }
            }
            @keyframes rotate{
              from {
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg)
              }
              
              to {
                -moz-transform:rotate(360deg);
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg)
              }
            }
            
         
            .c1{
              left:-1.625em;
              
            }
            
            .c2{
              right:-1.625em;
            }
            
            .inner-C{
              border-radius:400px;
              height:29%;
              left:35%;
              position:absolute;
              top:35%;
              width:29%;
            }
            
            .inner-inner{
              border-radius:300px;
              height:36%;
              margin:33% auto;
              width:36%
            }
            
            .hole{
              border:0;
              height:1.175em;
              position:absolute;
              width:.8em;
            }
            
            .h-Top, .h-Bottom{
              height:.123em;
            }
              .h-Top{
                left:0;
                top:0;
                width:100%;
              }
              .h-Bottom{
                bottom:0;
                left:16%;
                width:72%
              }
              .h-Left, .h-Right{
                height:100%;
                top:0;
                width:.123em;
              }
              .h-Left{
                left:0;
                -moz-transform:rotate(-10deg);
                -webkit-transform:rotate(-10deg);
                transform:rotate(-10deg)
              }
              .h-Right{
                right:0;
                -moz-transform:rotate(10deg);
                -webkit-transform:rotate(10deg);
                transform:rotate(10deg)
              }
            
            .hole1{
              left:.2em;
              top:-1.6em; 
            }
            
            .hole2{
              right:1.5em;
              top:.9em;
              -moz-transform:rotate(-127deg);
              -webkit-transform:rotate(-127deg);
              transform:rotate(-127deg);
            }
            
            .hole3{
              left:1.5em;
              top:.9em;
              -moz-transform:rotate(127deg);
              -webkit-transform:rotate(127deg);
              transform:rotate(127deg);
            }
            
            .nobs{
              border:0;
              float:left;
              width:23%
            }
            
            .mini-Circle{
              border-radius:300px;
              height:.625em;
              margin:.5em auto;
              width:.625em
            }
            
            .boxes{
              border:0;
              float:left;
              padding-top:.25em;
              width:27%;
            }
            
            .box{
              height:1em;
              margin:.5em 0;
              overflow:hidden;
              position:relative;
            }
            
            .boxes1 .box{
              margin-right:.2em;
            }
            
            .boxes2 .box{
              margin-left:.2em;
            }
            
            .meter{
              background:#fff;
              border:0;
              bottom:-.19em;
              height:.6em;
              left:45%;
              position:absolute;
              width:.1875em;
            }
            
            .meter1{
              -moz-animation:bf .4s infinite linear alternate;
              -webkit-animation:bf .4s infinite linear alternate;
              animation:bf .4s infinite linear alternate;
            }
            .meter2{
              -moz-animation:fb .6s infinite alternate;
              -webkit-animation:fb .6s infinite alternate;
              animation:fb .6s infinite alternate;
            }
            .meter3{
              -moz-animation:fb 1.1s infinite alternate;
              -webkit-animation:fb 1.1s infinite alternate.........完整代码请登录后点击上方下载按钮下载查看