CSS Google now Icon with animation

CSS-Google-now-Icon-.markdown

CSS Google now Icon with Animation

Made with 4 elements and 4 pseudo elements. Google now ICON with animation using only CSS

Forked from web-tiki's Pen CSS Google now Icon .

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div class="google-microphone"><div class="shadow listening"><div class="gn"><div class="mc"></div></div></div></div>

style.css

body{font-size: 15px;}
.google-microphone {
  width:10em; height:10em;
  display:flex;
  justify-content:center;
  align-items:center;
}
.shadow {
  position:relative;
  margin: 5% auto;
  border-radius:50%;
  width:3.5em; height:3.5em;
  background: #DBDBDB;
  top:20%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0px 0px 12px 8px #DBDBDB; 
}

@-webkit-keyframes move_eye { 
  from { 
    width:4em;
    height:4em;
  } to { 
    width:6em;
    height:6em; 
  }  
}

.listening {
-webkit-animation: move_eye 0.4s cubic-bezier(0.25,0.1,0.25,1) 0s infinite alternate;
}

.gn{
  position:relative;
  margin: 5% auto;
  background-color:rgb(0, 104, 128);
  border-radius:50%;
  width:3.5em; height:3.5em;
}
:before, :after{
  content:'';
  position:absolute;
  background-color:#fff;
}
.gn:after{
  top:30%; left:43%;
  height:15%; width:14%;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
}
.gn:before{
  top:40%; left:43%;
  height:15%; width:14%;
  border-bottom-left-radius:50%;
  border-bottom-right-radius:50%;
}
.mc{
  position:absolute;
  top:50%; left:37%;
  height:24%;
  width:26.5%;
  overflow:hidden;
}
.mc:before{
  bottom:50%;
  width:100%; height:100%;
  box-sizing:border-box;
  border-radius:50%;
  border:0.1em solid #fff;
  background:none;
}
.mc:after{
  top:50%; left:40%;
  width:20%; height:25%;
}