一个div布局实现一个照相机效果
代码语言：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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0