Blink

blink.markdown

Blink

A Pen by Charles on CodePen.

License.

index.html

<div class="blink">
  <div class="top">
    <div class="camera">
      <div class="inner_lens1">
        <div class="inner_lens2">
          <div class="inner_lens3"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <h1>blink</h1>
    <div class="main_circle">
      <div class="main_circle_inner"></div>
    </div>
  </div>
</div>

style.scss

$t: transparent;
$bk: #fff;

body{
  background-color: #72CFBA;
}
.blink {
  font-size: 1.6vmin;
  width: 16em;
  height: 49.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #7FFDD9;
  border-radius: 5em;
  border:1.5px solid black;
  background:    
    linear-gradient(
    to right, 
      #2B2B2D,
      #515356
    )
    ;
  background-repeat: no-repeat;
  .top{
    position: absolute;
    left:50%;
    top:19%;
    transform:translate(-50%,-50%);
    border-radius: 3.5em;
    width: 13.5em;
    height: 16.5em;
    border:1px solid yellow;
    border: 2px solid #232323;
    background: 
       
    linear-gradient(
      -77deg, 
    rgba($t,.0) 30%,
      rgba(#0D1212,.8) 50%,
    )
    100% 0% / 2em 20%,   
//  left most line
    linear-gradient(
      to right, 
    rgba(#242424,1),
      rgba(#131313,.8),

    )
    0% 100% / 1em 80%,        
//       right most line
    linear-gradient(
      to right, 
    rgba(#424A4E,.5),
      rgba(#757D86,.8),
    )
    100% 100% / 1em 100%,   
    linear-gradient(
      29deg, 
      #0F0F11 30%, 
      rgba(#0F0F11,1) 49%,
      rgba($t,.0) 50%,
    )
    -22% 0% / 60% 13%,           
    linear-gradient(
      -29deg, 
      #0F0F11 30%, 
      rgba(#0F0F11,1) 49%,
      rgba($t,.0) 50%,
    )
    122% 0% / 60% 13%,        
    linear-gradient(
      to right, 
    rgba(#313131,.3),
      rgba(#757D86,.5),
      rgba(#313131,.3),
    )
    50% 0% / 85% 13%,       
      linear-gradient(
        to bottom,
      #0F0F0F, #0D1212
        
      )      
     
      ;
    background-repeat: no-repeat;
    .camera{
      width: 6.5em;
      height:6.5em;
      
      border-radius:50%;
      position: absolute;
      left:50%;
      top:40%;
      transform:translate(-50%,-50%);       border:1px solid black;
      background-color:#2A2A2C;   
      .inner_lens1{
        width: 4.7em;
        height:4.7em;
        border:1px solid rgba(black,.7);
        position: absolute;
        left:50%;
        top:50%;
        box-shadow: 
          
          inset 0em .0em 1em rgba(#2A2A2C,.7),           
          inset .05em .0em .0em rgba(#fff,.3),   
          inset -.05em .0em .0em rgba(#fff,.3),             
          inset .15em .0em .0em #2A2A2C,
          inset -.15em .0em .0em #2A2A2C,        
          inset .0em .0em .4em #000,                   
          
          ;
        transform:translate(-50%,-50%); 
        border-radius:inherit;
        background:
    radial-gradient(
        100% 100% at 100% 50%,
//       #2C3B75
      rgba( #2C3C71,1),
      rgba(#111113,1) 51%,
      $t 52%
      )
      0% 70% / 1em 1em,           
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#2C3B75,1),
        rgba(#2C3B75,1) 30%,
      rgba(#2C3B75,1) 51%,
      $t 52%
      )
      0% 70% / 1em 1em,             
          #111113;
        background-repeat:no-repeat;
        .inner_lens2{
        width: 3em;
        height:3em;
        position: absolute;
        left:50%;
        top:50%;  
          transform:translate(-50%,-50%);
          border-radius:inherit;
          border:2px solid #3a373a;
          background:#111113;
          .inner_lens3{
        width: 2em;
        height:2em;
        position: absolute;
        left:50%;
        top:50%;  
          transform:translate(-50%,-50%);            border-radius:inherit;
            background:
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#000,1) 50%,
      rgba(blue,.0) 51%
      )
      50% 50% / .5em .5em,   
    linear-gradient(
      to right, 
      rgba(#D7F1FA,.4),
      rgba(#B195CA,.9),
    )
    150% 50% / 70% 20%,                 
    linear-gradient(
      159deg, 
      rgba(#111113,1) 49%,
      rgba($t,0) 50%,
    )
    150% 50% / 70% 20%,                
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#929FB0,.4),
        rgba(#61707B,.2) 50%,
      rgba(blue,.4) 51%
      )
      80% 20% / 1.5em 1.5em, 
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#929FB0,.4),
        rgba(#61707B,.2) 50%,
      rgba(blue,.4) 51%
      )
      80% 20% / 1em 1em,               
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#929FB0,.4),
        rgba(#61707B,.2) 50%,
      rgba(blue,.4) 51%
      )
      20% 20% / 1em 1em,                
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#61707B,.4),
        rgba(#61707B,.12) 50%,
      rgba(blue,.4) 51%
      )
      20% 50% / .8em .8em,                
    radial-gradient(
        100% 100% at 50% 50%,
      rgba(#929FB0,.6),
        rgba(#929FB0,.2) 50%,
      rgba(blue,.4) 51%
      )
      55% 50% / .8em .8em,                
              #111113;
            background-repeat:no-repeat;
        box-shadow: 
          inset 0em .0em 1em rgba(#2A2A2C,.7),                
          inset .15em .0em .0em #2A2A2C,
          inset -.15em .0em .0em #2A2A2C,          
          
          ;       
border:1px solid rgba(black,.7);            
          }
        }
      }
    }
  }
  .bottom{
    width:100%;
    height: 60%;
    // border:1px solid red;
    position: absolute;
    bottom:0;
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit; 
    background:
          radial-gradient(
        100% 100% at 50% 50%,
        rgba(#141618,1) 50%,
      rgba(blue,.0) 51%
      )
      50% 9% / .3em .3em,   
      ;
    background-repeat: no-repeat;
    h1{
      font-family: arial;
      color:#7a7c7d;
      // color:red;
      font-size: 2.5em;
      position:absolute;
      top:86%;
      left:50%;
      transform:translate(-50%,-50%);
      &:after{
        content: '';
        position: absolute;
        width:2em;
        height: .1em;
        background:#7a7c7d;
        top:-.1em;
        left:50%;
        transform:translate(-50%,-50%);
      }
    }
    .main_circle{
      width:10.7em;
      height:10.7em;
      border:1px solid rgba(black,.2);
      position:absolute;
      top:45.5%;
      left:49%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background:
        
        linear-gradient(to bottom,
          #4C78BD,
        #6195C8,
        #89BEE5)
        ;
      box-shadow:
                  0em .15em 0em rgba(#5cbbec,1),  
        ;
      .main_circle_inner{
      width:9em;
      height:9em;     
        border-radius: 50%;
        border:1px solid #37393B;
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background: 
          linear-gradient(to bottom,
            
          #393B3C,
          #37393B)
          ;
        box-shadow: 
           // 0em .0em .5em rgba(red,.7),
          -.3em .0em 0em rgba(#5cbbec,1),
          .3em .0em 0em rgba(#5cbbec,1), 
          0em -.3em 0em rgba(#5cbbec,1),        
          
          ;        
      }
    }
  }
}