一个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, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 20px -165px 3px -83px #eee, 14px -155px 3px -83px #666, 37px -153.5px 2px -80.2px #444, 37px -157px 2px -78px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -83px #eee, -122px -122.5px 1.5px -79.5px #444, -200px -124.5px 4px -83px #eee, -202px -122.5px 1.5px -79.5px #444, 107px -124.5px 4px -83px #eee, 105px -122.5px 1.5px -79.5px #444;
  moz-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, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 20px -165px 3px -83px #eee, 14px -155px 3px -83px #666, 37px -153.5px 2px -80.2px #444, 37px -157px 2px -78px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -83px #eee, -122px -122.5px 1.5px -79.5px #444, -200px -124.5px 4px -83px #eee, -202px -122.5px 1.5px -79.5px #444, 107px -124.5px 4px -83px #eee, 105px -122.5px 1.5px -79.5px #444;
  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, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 20px -165px 3px -83px #eee, 14px -155px 3px -83px #666, 37px -153.5px 2px -80.2px #444, 37px -157px 2px -78px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -83px #eee, -122px -122.5px 1.5px -79.5px #444, -200px -124.5px 4px -83px #eee, -202px -122.5px 1.5px -79.5px #444, 107px -124.5px 4px -83px #eee, 105px -122.5px 1.5px -79.5px #444;
}

/* media queries */
@media screen and (max-width: 549px) {
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Psuedo elements paired with multiple box shadows */
  }
  body div {
    background: #333;
    position: absolute;
    width: 424px;
    height: 270px;
    border-radius: 5px;
    background-image: linear-gradient(to right, #222 0px, transparent 100px, transparent 330px, transparent 330px, #222 100%), linear-gradient(to bottom, #ccc 20px, #ccc 20px, transparent 22px, transparent 250px, #ccc 250px);
    -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;
    content: "";
    -webkit-box-shadow: 251px -15px 0px 18px #333, 270px -15px 0px 18px #333, 250px -15px 0px 21.5px #fff, 271px -15px 0px 21.5px #fff, 247px -17px 2px 22px #333, 275px -22px 2px 17px #333, 120px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 240px 55px 0 100px #ccc, 320px -12px 0px 33px #ccc, 120px -17px 0 12px #444, 120px -24px 0 12px #fff, 50px -25px 2px 18px #888, 40px -25px 2px 18px #999, 30px -25px 2px 18px #666, 40px -25px 2px 18px #888, 48px -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, 55px -5px 0 5px #444, 390px -18px 1px 10px #ccc, 395px -18px 1px 10px #ccc, 400px -18px 1px 10px #ccc, 405px -18px 1px 10px #ccc, 375px -18px 2px 10px #888, 385px -18px 1.5px 10px #888, 400px -18px 1.5px 10px #888, 405px -18px 1.5px 10px #888, 375px -4px 0 5px #444, 380px -4px 0 5px #444, 385px -4px 0 5px #444, 390px -4px 0 5px #444, 395px -4px 0 5px #444, 400px -4px 0 5px #444, 405px -4px 0 5px #444;
    -moz-box-shadow: 251px -15px 0px 18px #333, 270px -15px 0px 18px #333, 250px -15px 0px 21.5px #fff, 271px -15px 0px 21.5px #fff, 247px -17px 2px 22px #333, 275px -22px 2px 17px #333, 120px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 240px 55px 0 100px #ccc, 320px -12px 0px 33px #ccc, 120px -17px 0 12px #444, 120px -24px 0 12px #fff, 50px -25px 2px 18px #888, 40px -25px 2px 18px #999, 30px -25px 2px 18px #666, 40px -25px 2px 18px #888, 48px -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, 55px -5px 0 5px #444, 390px -18px 1px 10px #ccc, 395px -18px 1px 10px #ccc, 400px -18px 1px 10px #ccc, 405px -18px 1px 10px #ccc, 375px -18px 2px 10px #888, 385px -18px 1.5px 10px #888, 400px -18px 1.5px 10px #888, 405px -18px 1.5px 10px #888, 375px -4px 0 5px #444, 380px -4px 0 5px #444, 385px -4px 0 5px #444, 390px -4px 0 5px #444, 395px -4px 0 5px #444, 400px -4px 0 5px #444, 405px -4px 0 5px #444;
    box-shadow: 251px -15px 0px 18px #333, 270px -15px 0px 18px #333, 250px -15px 0px 21.5px #fff, 271px -15px 0px 21.5px #fff, 247px -17px 2px 22px #333, 275px -22px 2px 17px #333, 120px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 155px 0px 0 20px #ccc, 150px 0px 0 20px #ccc, 240px 55px 0 100px #ccc, 320px -12px 0px 33px #ccc, 120px -17px 0 12px #444, 120px -24px 0 12px #fff, 50px -25px 2px 18px #888, 40px -25px 2px 18px #999, 30px -25px 2px 18px #666, 40px -25px 2px 18px #888, 48px -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, 55px -5px 0 5px #444, 390px -18px 1px 10px #ccc, 395px -18px 1px 10px #ccc, 400px -18px 1px 10px #ccc, 405px -18px 1px 10px #ccc, 375px -18px 2px 10px #888, 385px -18px 1.5px 10px #888, 400px -18px 1.5px 10px #888, 405px -18px 1.5px 10px #888, 375px -4px 0 5px #444, 380px -4px 0 5px #444, 385px -4px 0 5px #444, 390px -4px 0 5px #444, 395px -4px 0 5px #444, 400px -4px 0 5px #444, 405px -4px 0 5px #444;
  }
  body div:after {
    position: absolute;
    top: 47px;
    left: 160px;
    content: "";
    width: 170px;
    height: 170px;
    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, -145.5px -90px 2.5px -77.5px #aaa, -145px -90px 2px -73px #888, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 11px -153px 3px -80px #eee, 6px -142px 3px -80px #666, 25px -143px 2px -79px #444, 25px -145px 2px -77px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -80px #eee, -122px -122.5px 1.5px -77.5px #444, -200px -124.5px 4px -80.5px #eee, -202px -122.5px 1.5px -77.5px #444, 99px -124.5px 4px -80px #eee, 97px -122.5px 1.5px -77.5px #444;
    -moz-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, -145.5px -90px 2.5px -77.5px #aaa, -145px -90px 2px -73px #888, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 11px -153px 3px -80px #eee, 6px -142px 3px -80px #666, 25px -143px 2px -79px #444, 25px -145px 2px -77px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -80px #eee, -122px -122.5px 1.5px -77.5px #444, -200px -124.5px 4px -80.5px #eee, -202px -122.5px 1.5px -77.5px #444, 99px -124.5px 4px -80px #eee, 97px -122.5px 1.5px -77.5px #444;
    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, -145.5px -90px 2.5px -77.5px #aaa, -145px -90px 2px -73px #888, -145px -91px 1px -63px #ccc, -145px -90px 2px -58px #aaa, -145px -88px 4px -57px black, 11px -153px 3px -80px #eee, 6px -142px 3px -80px #666, 25px -143px 2px -79px #444, 25px -145px 2px -77px #777, -72px -156px 3px -78.5px #444, -70px -158px 1px -69px #333, -70px -157px 0.5px -66.5px #ccc, -70px -156px 1px -62px #999, -120px -124.5px 4px -80px #eee, -122px -122.5px 1.5px -77.5px #444, -200px -124.5px 4px -80.5px #eee, -202px -122.5px 1.5px -77.5px #444, 99px -124.5px 4px -80px #eee, 97px -122.5px 1.5px -77.5px #444;
  }
}
/* media queries */
@media screen and (min-width: 550px) {
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body div {
    background: #333;
    position: absolute;
    width: 500px;
    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 {
    content: "";
    position: relative;
    display: flex;
    width: 10px;
    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 5p.........完整代码请登录后点击上方下载按钮下载查看