纯css实现雷克逊收音机效果-html代码-BFW代码库

纯css实现雷克逊收音机效果

代码语言：html

代码描述：纯css实现雷克逊收音机效果

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


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

<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

:before,
:after, #k:before, #k:after {
  content: '';
  display: block;
  position: absolute;
}

#wrapper, #y:before, #y:after {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

html {
  background: #e4e4e2;
}

#wrapper {
  position: absolute;
  width: 448px;
  height: 250px;
}

#t {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 24px;
  background: #e4e4e2;
  box-shadow: 41px 25px 82px #c9c9c7,  -41px -25px 82px #fffffd;
}
#t:before, #t:after {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  bottom: 70px;
  box-shadow: inset 1px 1px 2px 0 rgba(255, 255, 255, 0.8), 4px 4px 10px #b6b6b5, -4px -4px 10px #ffffff;
  background: linear-gradient(145deg, #cdcdcb, #f4f4f2);
}
#t:before {
  right: 54px;
}
#t:after {
  right: 110px;
}

#y {
  position: absolute;
  bottom: 22px;
  left: 30px;
  width: 206px;
  height: 206px;
  border-radius: 50%;
  background: #EAEAE8;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 5px 5px 16px #c0c0be, -5px -5px 16px #ffffff;
}
#y:before {
  width: 176px;
  height: 176px;
  border-radius: inherit;
  background-image: radial-gradient(.........完整代码请登录后点击上方下载按钮下载查看