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

代码语言：html

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*, *:after, *:before {
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* MAIN DIV STYLE */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FAC568;
  /* Psuedo elements paired with multiple box shadows */
}
body div {
  background: #333;
  width: 400px;
  height: 280px;
  border-radius: 5px;
  background-image: linear-gradient(to right, #222 0px, transparent 100px, transparent 400px, transparent 400px, #222 100%), linear-gradient(to bottom, #ccc 20px, #ccc 20px, transparent 22px, transparent 257px, #ccc 258px);
  -webkit-box-shadow: 0px 11px 14px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 11px 14px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 11px 14px -4px rgba(0, 0, 0, 0.75);
}
body div:before {
  background: #333;
  -webkit-box-shadow: 301px -25px 0px 18px #333, 329px -25px 0px 18px #333, 330px -25px 0px 18px #333, 300px -25px 0px 21.5px #fff, 331px -25px 0px 21.5px #fff, 297px -28px 2px 22px #333, 330px -28px 2px 22px #333, 330px -25px 2px 17px #333, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 160px 0px 0 20px #ccc, 165px 0px 0 20px #ccc, 170px 0px 0 20px #ccc, 290px 45px 0 100px #ccc, 370px -18px 0px 37px #ccc, 155px -15px 0 15px #444, 155px -20px 0 15px #fff, 50px -25px 2px 18px #888, 38px -25px 2px 18px #999, 30px -25px 2px 18px #666, 60px -25px 2px 18px #888, 70px -25px 2px 18px #888, 25px -5px 0 5px #444, 30px -5px 0 5px #444, 35px -5px 0 5px #444, 40px -5px 0 5px #444, 45px -5px 0 5px #444, 50px -5px 0 5px #444, 55px -5px 0 5px #444, 60px -5px 0 5px #444, 65px -5px 0 5px #444, 70px -5px 0 5px #444, 75px -5px 0 5px #444, 453px -18px 1px 10px #ccc, 455px -18px 1px 10px #ccc, 460px -18px 1px 10px #ccc, 465px -18px 1px 10px #ccc, 470px -18px 1px 10px #ccc, 475px -18px 1px 10px #ccc, 443px -18px 2px 10px #888, 450px -18px 1.5px 10px #888, 455px -18px 1.5px 10px #888, 460px -18px 1.5px 10px #888, 445px -4px 0 5px #444, 450px -4px 0 5px #444, 455px -4px 0 5px #444, 460px -4px 0 5px #444, 465px -4px 0 5px #444, 470px -4px 0 5px #444, 475px -4px 0 5px #444;
  -moz-box-shadow: 301px -25px 0px 18px #333, 329px -25px 0px 18px #333, 330px -25px 0px 18px #333, 300px -25px 0px 21.5px #fff, 331px -25px 0px 21.5px #fff, 297px -28px 2px 22px #333, 330px -28px 2px 22px #333, 330px -25px 2px 17px #333, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 160px 0px 0 20px #ccc, 165px 0px 0 20px #ccc, 170px 0px 0 20px #ccc, 290px 45px 0 100px #ccc, 370px -18px 0px 37px #ccc, 155px -15px 0 15px #444, 155px -20px 0 15px #fff, 50px -25px 2px 18px #888, 38px -25px 2px 18px #999, 30px -25px 2px 18px #666, 60px -25px 2px 18px #888, 70px -25px 2px 18px #888, 25px -5px 0 5px #444, 30px -5px 0 5px #444, 35px -5px 0 5px #444, 40px -5px 0 5px #444, 45px -5px 0 5px #444, 50px -5px 0 5px #444, 55px -5px 0 5px #444, 60px -5px 0 5px #444, 65px -5px 0 5px #444, 70px -5px 0 5px #444, 75px -5px 0 5px #444, 453px -18px 1px 10px #ccc, 455px -18px 1px 10px #ccc, 460px -18px 1px 10px #ccc, 465px -18px 1px 10px #ccc, 470px -18px 1px 10px #ccc, 475px -18px 1px 10px #ccc, 443px -18px 2px 10px #888, 450px -18px 1.5px 10px #888, 455px -18px 1.5px 10px #888, 460px -18px 1.5px 10px #888, 445px -4px 0 5px #444, 450px -4px 0 5px #444, 455px -4px 0 5px #444, 460px -4px 0 5px #444, 465px -4px 0 5px #444, 470px -4px 0 5px #444, 475px -4px 0 5px #444;
  box-shadow: 301px -25px 0px 18px #333, 329px -25px 0px 18px #333, 330px -25px 0px 18px #333, 300px -25px 0px 21.5px #fff, 331px -25px 0px 21.5px #fff, 297px -28px 2px 22px #333, 330px -28px 2px 22px #333, 330px -25px 2px 17px #333, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 160px 0px 0 20px #ccc, 165px 0px 0 20px #ccc, 170px 0px 0 20px #ccc, 290px 45px 0 100px #ccc, 370px -18px 0px 37px #ccc, 155px -15px 0 15px #444, 155px -20px 0 15px #fff, 50px -25px 2px 18px #888, 38px -25px 2px 18px #999, 30px -25px 2px 18px #666, 60px -25px 2px 18px #888, 70px -25px 2px 18px #888, 25px -5px 0 5px #444, 30px -5px 0 5px #444, 35px -5px 0 5px #444, 40px -5px 0 5px #444, 45px -5px 0 5px #444, 50px -5px 0 5px #444, 55px -5px 0 5px #444, 60px -5px 0 5px #444, 65px -5px 0 5px #444, 70px -5px 0 5px #444, 75px -5px 0 5px #444, 453px -18px 1px 10px #ccc, 455px -18px 1px 10px #ccc, 460px -18px 1px 10px #ccc, 465px -18px 1px 10px #ccc, 470px -18px 1px 10px #ccc, 475px -18px 1px 10px #ccc, 443px -18px 2px 10px #888, 450px -18px 1.5px 10px #888, 455px -18px 1.5px 10px #888, 460px -18px 1.5px 10px #888, 445px -4px 0 5px #444, 450px -4px 0 5px #444, 455px -4px 0 5px #444, 460px -4px 0 5px #444, 465px -4px 0 5px #444, 470px -4px 0 5px #444, 475px -4px 0 5px #444;
}
body div:after {
  position: absolute;
  top: 200px;
  left: 215px;
  content: "";
  width: 175px;
  height: 175px;
  background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
  border-radius: 50%;
  -webkit-box-shadow: 1.5px -2px 1px 1px #fff, -1px -3px 13px #555, 0 0 3px 25px #c2c2c2, 0 -2px 1px 26px #fff, -2px -5px 3px 29px #666, 0 0 3px 28px black, -145px -91px 2px -77.5px #aaa, -145px -90px 2px -73px #888, -1.........完整代码请登录后点击上方下载按钮下载查看