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.........完整代码请登录后点击上方下载按钮下载查看