一个div+css实现麦克风效果-html代码-BFW代码库

一个div+css实现麦克风效果

代码语言：html

代码描述：一个div+css实现麦克风效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.microphone {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 111px;
  height: 160px;
  background: #e4e4e4;
  border-radius: 46px;
  box-shadow: inset -20px 0px 20px 6px #363636cc;
  transform: rotate(10deg);
  background-image: linear-gradient(#1a1a1a 45%,transparent 12%);
    background-repeat: space;
    background-size: 51px 18px;
}


 .microphone::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 29px;
  top: 158px;
  left: 37px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle closest-side,#dacdcd 55%, transparent), linear-gradient(90deg, #1f2120 44%, #000000);
  background-size: 10px 10px, 40px 33px;
  background-position: 16px 3px, 0px -4px;
  border-bottom-left-radius: 13px 25px;
  border-bottom-right-radius: 13px 25px;
}


.microphone::after {
  content: '';
    position: a.........完整代码请登录后点击上方下载按钮下载查看