如何使用CSS3制作Google Now麦克风图标？

Question

我正在尝试使用纯CSS3创建"Google Now"麦克风图标.
该图标在红色圆形背景上有一个白色麦克风.
我尝试了字体很棒,但是徒劳无功,
我需要你的帮助来完成这个任务
没有动画或功能,只有图标

Answer 1

Google即时图标仅限CSS

DEMO

输出:

HTML:

<div class="gn"><div class="mc"></div></div>

CSS:

body{font-size: 15px;}
.gn{
  position:relative;
  margin: 5% auto;
  background-color:#FE2222;
  border-radius:50%;
  width:10em; height:10em;
}
: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.5em solid #fff;
  background:none;
}
.mc:after{
  top:50%; left:40%;
  width:20%; height:25%;
}