div+css布局实现摄像头摄像机代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现摄像头摄像机代码

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


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

<head>


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

body {
  font-size: 1.2vmin;
  background: #F5F26E;
  background-repeat: no-repeat;
  background-size: 1000px;
  background-position: 52% 12.8%;
}

.camera {
  width: 88em;
  height: 49.5em;
  position: absolute;
  top: 50%;
  left: 49.4%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}
.camera .top {
  width: 93.7%;
  height: 14em;
  border-bottom: .5px solid #232323;
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(rgba(255, 255, 255, 0.6), #E3E3E5, #E4E4E4) 89% 0%/43em 0.6em, linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.3), #E4E4E4) 15% 86%/40em 1em, linear-gradient(to right, #F5F26E, #F5F26E 99.3%, #B0B0B0) 0% 0%/34.8em 3em, linear-gradient(to right, #E4E4E4, #E4E4E4) 0% 0%/95.4% 14em, linear-gradient(to right, #E8E7ED, #DFDFDF) 100% 100%/4em 9em;
  background-repeat: no-repeat;
}
.camera .top:after {
  content: '';
  width: 5.8em;
  height: 5.8em;
  position: absolute;
  border-radius: 50%;
  top: 47.3%;
  left: 57.3%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, #B8160D, #E21F1B 90%), radial-gradient(circle at 50% 50%, #B8160D, #E21F1B);
  background: url(data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看