css布局实现环形摄像头效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现环形摄像头效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

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

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4vmin;
  background-size: 750px;
  background-position: 50% 8.5%;
  background-repeat: no-repeat;
  background: #0baedd;
}

.ring {
  width: 26.5em;
  height: 55em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 5%, transparent 12%, transparent 89%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.8) 100%) 50% 0%/100% 23.1em, linear-gradient(to right, #303030, #303030) 50% 0%/100% 23.1em, linear-gradient(to right, rgba(167, 170, 169, 0.8) 0%, rgba(167, 170, 169, 0.3) 5%, #DEDEDE 12%, #DEDEDE 89%, rgba(167, 170, 169, 0.3) 95%, rgba(167, 170, 169, 0.8) 100%) 50% 100%/100% 32em, linear-gradient(to right, rgba(167, 170, 169, 0.8) 0%, rgba(167, 170, 169, 0.3) 5%, #DEDEDE 12%, #DEDEDE 89%, rgba(167, 170, 169, 0.3) 95%, rgba(167, 170, 169, 0.8) 100%) 50% 100%/100% 32em, linear-gradient(#DEDEDE 49%, #DEDEDE 51%) 50% 100%/100% 32em, radial-gradient(100% 100% at 50% 50%, rgba(255, 0, 0, 0.5) 50%, blue 51%) 55% 0%/22em 22em;
  background-repeat: no-repeat;
}
.ring .top {
  width: 100%;
  height: 23.3em;
  position: relative;
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #171717) 50% 82%/100% 0.04em, linear-gradient(to top, rgba(23, 23, 23, 0), #171717) 50% 84%/100% 0.04em, linear-gradient(to top, rgba(0, 0, 0, 0), #171717) 50% 40%/100% 0.04em, linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 7%, rgba(107, 107, 107, 0.6) 8%, rgba(107, 107, 107, 0.6) 14%, transparent 16%, transparent 89%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.8) 100%) 50% 0%/100% 23.1em, linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 7%, rgba(107, 107, 107, 0.6) 8%, rgba(107, 107, 107, 0.6) 13%, transparent 16%, transparent 89%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.8) 100%) 50% 0%/100% 23.1em;
  background-repeat: no-repeat;
}
.ring .top .camera {
  width: 50%;
  height: 9.5em;
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.ring .top .camera:before {
  content: '';
  width: 12.5em;
  height: 12.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ring .top .camera:after {
  content: '';
  width: 10em;
  height: 1em;
  background: #303030;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
}
.ring .top .camera .inner_circle {
  width: 12.5em;
  height: 12.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #414141;
}
.ring .top .camera .inner_circle:before {
  content: '';
  width: 10em;
  height: .5em;
  background: #303030;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 86.6%;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
}
.ring .top .camera .inner_circle:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.ring .top .camera .inner_circle .black_circle {
  width: 6em;
  height: 6em;
  border: .3em solid #2A2A2A;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(40deg);
  border-radius: 50%;
  top: 48%;
  box-shadow: inset 0 0px 0.6em 0.6em rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(0% 50%, 50% 22%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(0% 100%, 80% 82%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}
.ring .top .camera .inner_circle .black_circle .camera_circle {
  width: 4em;
  height: 4em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: -webkit-radial-gradient(0% 50%, 50% .........完整代码请登录后点击上方下载按钮下载查看