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

css实现磁带录音机动画效果代码

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