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

div+css布局实现摄像头镜头效果代码

代码语言：html

代码描述：div+css布局实现摄像头镜头效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: rgb(240, 200, 200);
  position: relative;
}

.concentric-circle {
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.outer-housing {
  width: 20rem;
  height: 20rem;
  background: linear-gradient(0deg, rgb(80, 80, 80), rgb(0, 0, 0));
  border: 2px solid rgb(80, 80, 80);
}

.silver-ring {
  width: 96%;
  height: 96%;
  background: linear-gradient(45deg, rgb(200, 200, 200), rgb(100, 100, 100), rgb(200, 200, 200));
  box-shadow: 1px 1px rgb(240, 240, 240) inset;
}

.inner-housing {
  width: 97%;
  height: 97%;
  background: radial-gradient(ellipse at 70% 50%, rgb(80, 80, 80), rgb(40, 40, 40));
  box-shadow: 2px 2px rgb(210, 220, 220), 0 6px rgb(40, 40, 40) inset;
}

.outer-lens {
  width: 80%;
  height: 80%;
  background: linear-gradient(0deg, rgba(80, 200, 140, 0.2), rgba(120, 80, 200, 0.2)), radial-gradient(circle at 10% 10%,  rgba(40, 220, 40, 0.8) 0%, rgba(80, 200, 140, 0.6) 10%, transparent 40%), radial-gradient(circle at 0% 40%,  rgba(120, 80, 200, 0.8) 0%, rgba(120, 80, 200, 0.6) 10%, transparent 30%), radial-gradient(circle at 90% 90%,  rgba(40, 100, 200, 0.4) 0%, rgba(40, 100, 200, 0.2) 10%, transparent 20%);
  z-index: 100;
}

.outer-ribbing {
  width: 75%;
  height: 75%;
  background: rgb(40, 40, 40);
  box-shadow: 0 4px 4px rgb(0, 0, 0, 0.4) inset;
  z-index: 1;
}

.ribbing {
  border: 1px solid rgb(10, 10, 10);
  background: rgb(60, 60, 60);
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  z-index: 1;
}

.aperture-housing {
  width: 100%;
  height: 100%;
  background: rgb(80, 80, 80);
  box-shadow: 0 -10px 10px rgb(255, 255, 255, 0.1) inset
}

.small-lens-outer {
  width: 85%;
  height: 85%;
  background: linear-gradient(0deg, rgb(30, 30, 30), rgb(0, 0, 0));
  box-shadow: 0 2px 0px rgb(255, 255, 255, 0.4)
}

.small-lens-inner {
  background: rgb(0, 0, 0);
  width: 70%;
  height: 70%;
  background: conic-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 180, 200, 0.6), rgba(100, 240, 100, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(200, 200, 140, 0.3), rgba(200, 240, 100, 0.2), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), radial-gradient(circle at 10% 10%,  rgba(255, 220, 220, 0.8) 0%, rgba(220, 120, 100, 0.6) 20%, transparent 40%);
  box-shadow: 0 1px 1px 1px rgb(255, 255, 255, 0.4)
}

.tiny-lens-outer {
  width: 70%;
  height: 70%;
}

.tiny-lens-inner {
  width: 60%;
  height: 60%;
  border: 2px solid rgb(0, 0, 0, 0.6);
  filter: blur(1px)
}

.shine {
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5.........完整代码请登录后点击上方下载按钮下载查看