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

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

代码语言：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,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAk1BMVEXtHCT////sAADtEhztFyDsABDtDhnsAA7sAAnsBxXtDxrtFR7sAAf//Pz+8/P6zc7uPULuMDb++Pj4vr/71tf0lJbwXF/xa27vT1P84uL72dr1l5n1oKLzhIbye335x8j86Oj3tbftJi32rK3wVFj0jpDxb3LxZ2ruOj/4u7z719f3sbLwYGTydXjuMTfzgYPvRUriWEdIAAASYUlEQVR4nOVd6WKyOhDFYY0oal3qgrgV7aKt7/90l7AmIWETBL97frbVckgy+0ykXuOwVqOD7Trvi+X49yhJ0vF3vFy8O659GK2s5v+91OSXr6ab8xg8GCrSZFNRpACKYsoaUg38q/F5M101+RBNMVwdtnfv+VXNlLJhaqr3d/ftYd/QkzTBcHV6N2CA8rhRPNEAjPdTE4tZN8Ph1OmDoZUgl0AzoO9MhzU/Ua0M3w5XAKTkcxFCQQDXw1udD1Ujw68FGPID7CL0Dbh+1fdYdTGcOQB10AtJAjizmp6sFobD0wRQbfQCIJicajmSNTDcb8F45OyJoBiwrUGFPMxwfal9+RIguKxbZjj7gH5j/DA0+HjwQD7EcL2sUbqIIMPHQ+v4AMP99Qn8Ao7XB85jZYZvTsP7k0Qf/ipbAVUZ2g3KFx4QnJ7KcDaBp/LDgMn30xgOHSjjN9QFE5wnMdypz92gCRDaPYPhOzRhwBSDAufGGY60thYwAOqXNQBKMnRbXMAACrgNMrTGRsv8MAbjUhG6MgxHT7Jh8iDDqBmGm+frQBFg0wTDa3cIehSvtTO0ftuVoSzU36KHsSDDld6NI5hAVgsGV4sxHLWuJNJQCsqbQgwPXTqCCeBQF0O7mwQ9ikU8qgIMO6QlWBTRGvkM590l6FGcP86w0wSLUMxj2OEtGiB3o+Yw7KyQSZAnbrIZdlRN0IDsRFUmw9ErEPQoZqr+LIar1yDoUcwy4DIYWnr3TDU+FDXDDM9g+Ns1Y1sM+bcKw2u33KVsqGJ/Uciw84qQhlgtihi+iBhNIBSoAobWqxH0KAqkjYDh+HWkTAR5XIahO2j7eStgwA8Vcxm+3CEMANyAP5eh9iqqnoYiF2V4fiVNSALxMlMchrvX3KMYwMkvphkOHyoubBcKKsLQedU9iqGmE+EphrPX3aMYkKouSjGctFGEUB/MSR7D02svISdswzB8e3WCHsW3.........完整代码请登录后点击上方下载按钮下载查看