Animated Camera Icon

Animated Camera Icon .markdown

Animated Camera Icon

Inspiration by http://dribbble.com/shots/1302621-Icons

A Pen by Jitendra on CodePen.

License.

index.html

<div id="cameraicon">
          <div id="bottomblack">
             <div id="printer"></div>
          </div>
          <div id="printpaper"></div>
          <div id="flash"></div>
          <div id="button1"></div>
          <div id="button2"></div>
          <div id="button3"></div>
          <div id="lens">
           <div id="middlelens"> </div>
          </div>
          <div id="strip"></div> 
</div>

style.css

body{
      background:#daeaac;
      }
      
      #cameraicon
      {
       width:360px;
       height:360px;
       margin: 0 auto;
       background:#fff;
       border-radius:10px 10px 20px 20px;
       position:relative;
      }
      
      #bottomblack
      {
      border-radius:0px 0px 15px 15px;
      width:100%;
      height:60px;
      background:#3a3a3c;
      border-top:10px solid #0b0b0b;
      position:absolute;
      bottom:0px;
      left:0px;
      }
      #bottomblack:before
      {
       width: 100%;
      height: 90px;
      position: absolute;
      background: #e7e7e8;
      top: -100px;
      left: 0px;
      content: "";
      } 
      
     #printer
     {
     width:300px;
     height:20px;
     background:#0b0b0b;
     margin:0 auto;
     position:relative;
     top:15px;
     }    

     #printpaper
     {
      width: 280px;
      height: 0px;
      background: #fff;
      position: absolute;
      top: 315px;
      left: 11%;
      -webkit-animation:print 2s infinite;
      -moz-animation:print 2s infinite;
      animation:print 2s infinite;
     }
     #printpaper:before
     {
      width: 260px;
      height: 0px;
      background: #b4d557;
      position: absolute;
      top: 0px;
      left: 10px;
      content: "";
      -webkit-animation:print1 2s infinite;
      -moz-animation:print 2s infinite;
      animation:print 2s infinite;
     }
     #printpaper:after
     {
      width: 100%;
      height: 5px;
      background: #0b0b0b;
      opacity:0.2;
      position: absolute;
      top: 0px;
      left: 0px;
      content: ""; 
     }
     #flash
     {
     width:30px;
     height:30px;
     background:#4c4d4f;
     border-radius:5px;
     position:absolute;
     right:25px;
     top:25px;
     -webkit-box-shadow:inset 0px 0px 10px #3a3a3c;
     -moz-box-shadow:inset 0px 0px 10px #3a3a3c;
     box-shadow:inset 0px 0px 10px #3a3a3c;
     }
     #button1
     {
     width:50px;
     height:20px;
     background:#6d6e71;
     border-radius:5px 5px 0px 0px;
     position:absolute;
     left:25px;
     top:70px;
     }
    #button2
     {
     width:40px;
     height:40px;
     background:#f28021;
     border-radius:50%;
     position:absolute;
     border:5px solid #ffffff;
     -webkit-box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     -moz-box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     left:25px;                       
     top:120px;
     }
    #button3
     {
     width:25px;
     height:25px;
     background:#3a3a3c;
     border-radius:50%;
     position:absolute;
     border:5px solid #ffffff;
     -webkit-box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     -moz-box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     box-shadow:0px 4px 0px rgba(212,213,214,0.5);
     right:25px;                       
     top:130px;
     }     
    #lens
     {
      width: 130px;
      height: 130px;
      background: #6d6e71;
      border-radius: 50%;
      position: absolute;
      border: 10px solid #e7e8e9;
      -webkit-box-shadow: 0px 8px 0px rgba(209,210,212,0.5);
      -moz-box-shadow: 0px 8px 0px rgba(209,210,212,0.5);
      box-shadow: 0px 8px 0px rgba(209,210,212,0.5);
      left: 110px;
      top: 75px;
      z-index:10;
     }
     #middlelens
     {
    width: 75px;
    height: 75px;
    background: #3a3a3c;
    border-radius: 50%;
    position: absolute;
    left: 28px;
    top: 30px;
     }    
    #middlelens:after,#middlelens:before
    {
     background:#afb1b4;
    } 
     #middlelens:after
    {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      content: "";
      left: 50px;
      top: 0px;  
    }
    #middlelens:before
    {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    content: "";
    left: 20px;
    top: 67px;          
    } 
    #strip
    {
    width: 50px;
    height: 89px;
    position: absolute;
    left: 135px;
    top: 201px;
    background: #0ba9b3;
    border-left: 50px solid #1198a2;
    z-index: 5;       
    }                           
      
@-webkit-keyframes print
      {
       0%{height:0px;}
       100%{height:90px;}
      }
@-moz-keyframes print
      {
       0%{height:0px;}
       100%{height:90px;}
      }
@-webkit-keyframes print1 
      {
       0%{height:0px;}
       100%{height:80px;}
      }
@-moz-keyframes print1 
      {
       0%{height:0px;}
       100%{height:80px;}
      }
      @keyframes print
      {
       0%{height:0px;}
       100%{height:90px;}
      }
      @keyframes print1
      {
       0%{height:0px;}
       100%{height:80px;}
      }