css布局实现一个相机效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个相机效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  font-family: arial;
  font-size: 1.5vmin;
  background-size: 1100px;
  background-size: 117em;
  background-position: 55% -4%;
  background-repeat: no-repeat;
  background-color: #685BC6;
}

.camera {
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  width: 57.5em;
  height: 54.5em;
  position: absolute;
  top: 49.6%;
  left: 50%;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  transform: translate(-50%, -50%);
  background: linear-gradient(#DAD2CC 49%, #DAD2CC 51%) 100% 0%/100% 100%, radial-gradient(100% 100% at 50% 50%, rgba(255, 0, 0, 0.5) 50%, blue 51%) 55% 0%/22em 22em;
  background-repeat: no-repeat;
}
.camera:after {
  border-radius: 1em;
  content: "";
  position: absolute;
  width: 81%;
  left: 59%;
  transform: translate(-50%, 0%);
  height: 0.7em;
  background: linear-gradient(to top, rgba(98, 98, 98, 0.8), rgba(0, 0, 0, 0));
  bottom: 0%;
  border-radius: 0.5em;
}
.camera:before {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  content: "";
  position: absolute;
  width: 100%;
  height: 0.9em;
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(98, 98, 98, 0.14), rgba(0, 0, 0, 0));
  bottom: 0;
}
.camera h1 {
  color: #BFB6B0;
  letter-spacing: -2px;
  font-size: 4em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 7.5%;
  left: 56%;
  font-weight: bold;
}
.camera h1:after {
  content: "instax";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #D4CCC8;
  top: 54%;
  left: 50%;
}
.camera h1:before {
  content: "instax";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #E0D8D2;
  color: rgba(255, 255, 255, 0.6);
  top: 56%;
  left: 50%;
  font-size: 1.8;
}
.camera .square_top {
  width: 3.3em;
  height: 3.3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 15%;
  left: 56%;
  background: #D4CCC8;
  border-radius: 0.23em;
  box-shadow: inset 2px 2px 2px rgba(180, 173, 170, 0.8), inset -2px -2px 2px rgba(244, 235, 230, 0.6);
}
.camera .square_top h2 {
  color: rgba(0, 0, 0, 0.1);
  font-family: "Oxygen", sans-serif;
  font-size: 1.9em;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 40%;
}
.camera .square_top h2:after {
  content: "SQ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #EFE7E1;
  color: #DED6CF;
  top: 49%;
  left: 50%;
}
.camera .square_top h2:before {
  content: "SQ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.5);
  top: 58%;
  left: 50%;
}
.camera #one {
  font-weight: bold;
  content: "instax";
  color: #BFB6B0;
  font-size: 2.8em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 15%;
  left: 61%;
}
.camera #one:before {
  content: "1";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.7);
  top: 55%;
  left: 45%;
}
.camera #one:after {
  content: "1";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #D4CCC8;
  top: 51%;
  left: 45%;
}
.camera .lens_left {
  width: 7.5em;
  height: 7.4em;
  border-radius: 1em;
  position: absolute;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.3)) 0% 100%/100% 50%, linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.2)) 0% 0%/100% 100%, linear-gradient(120deg, rgba(0, 0, 0, 0) 35%, rgba(77, 77, 77, 0.2), rgba(0, 0, 0, 0) 65%) 2em 0%/100% 50%, linear-gradient(45deg, r.........完整代码请登录后点击上方下载按钮下载查看