css布局实现一个老式相机效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现一个老式相机效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
body {
background: #B0C8C1;
font-size: 1vmin;
}
.camera {
font-size: 1.15vmin;
width: 66em;
height: 55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.camera .back {
border-top-left-radius: 5em;
border-top-right-radius: 5em;
width: 63.3em;
height: 39.5em;
position: absolute;
content: '';
top: -.6em;
left: 50.1%;
transform: translate(-50%, 0%);
background: linear-gradient(to bottom, #626265, rgba(34, 33, 38, 0.4)) 100% 6%/100% 2em, linear-gradient(to left, #222126, #8d8d90) 100% 0%/0.8em 100%, linear-gradient(to right, #222126, #8d8d90) 0% 0%/0.8em 100%, linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, #8d8d90, #8d8d90, rgba(0, 0, 0, 0.3) 95%) 10.8% 0%/100% 3.5em, linear-gradient(to bottom, #8d8d90, #8d8d90) 10.8% 0%/100% 100%, #222126;
background-repeat: no-repeat;
}
.camera .top_middle {
position: absolute;
width: 62em;
height: 34.8em;
border-top: 2px solid #363838;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
background: linear-gradient(to top, rgba(255, 255, 255, 0.08) 1%, rgba(255, 255, 255, 0) 5%) 100% 100%/100% 100%, #28272b;
background-repeat: no-repeat;
}
.camera .top_middle .top_left {
width: 11.3em;
height: 19.4em;
border-right: 2px solid #A6A89E;
border-bottom: 2px solid #A6A89E;
border-left: 2px solid #A6A89E;
border-top: 2px solid #5B5D5C;
box-shadow: 0 0 0 1px rgba(40, 40, 40, 0.7), 0 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 1.4em;
position: absolute;
top: 2.7em;
left: 2.8em;
background: linear-gradient(to top, black, rgba(35, 35, 35, 0)) 0% 0%/100% 0.3em, linear-gradient(to right, black, rgba(35, 35, 35, 0)) 0% 100%/0.5em 100%, #565656;
background-repeat: no-repeat;
}
.camera .top_middle .top_left .body {
overflow: hidden;
width: 10.1em;
height: 18.1em;
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(to bottom, white 60%, rgba(128, 128, 128, 0.5));
background-size: 100% .2em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.camera .top_middle .top_left .body:before {
content: '';
width: 100%;
height: 11.7em;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(to bottom, #232323 55%, rgba(255, 255, 255, 0.5));
background-size: 100% .3em;
}
.camera .top_middle .top_left .body:after {
content: '';
width: 60%;
height: 120%;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(#E0E0E0 49%, transparent 51%) 50% 0%/95% 5em, linear-gradient(to top, #E0E0E0 49%, transparent 51%) 50% 100%/95% 5.5em, #fff;
background-repeat: no-repeat;
}
.camera .top_middle .top_left .middle {
z-index: 5;
width: 50%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(to right, #DFDFDF 20%, #fff 45%, #DFDFDF 50%);
background-size: .5em 100%;
}
.camera .top_middle .top_left .middle:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(#c7c7c7 48%, #232323, transparent 53%) 50% 5%/95% 0.5em, linear-gradient(#E0E0E0 49%, transparent 51%) 50% 0%/95% 2.5em, linear-gradient(to top, #bababa 29%, transparent 31%) 50% 100%/95% 3em;
background-repeat: no-repeat;
}
.camera .top_middle .top_left .middle:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(#888888, #888888 53%) 50% 50%/0.15em 88%, linear-gradient(#888888, #888888 53%) 50% 50%/0.4em 88%;
background-repeat: no-repeat;
}
.camera .top_middle .red_button_container {
width: 8.3em;
height: 8.3em;
position: absolute;
top: 73.7%;
left: 9.7%;
transform: translate(-50%, 0%);
border-radius: 50%;
border: 10px solid #2D292B;
border: 4px solid #3A3537;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 4px 5px 4px rgba(0, 0, 0, 0.9), 5px 5px 15px rgba(0, 0, 0, 0.9), 0 6px 6px rgba(0, 0, 0, 0.33);
}
.camera .top_middle .red_button_container .red_button {
width: 90%;
height: 90%;
position: absolute;
border: 2px solid #000;
border-top: 4px solid #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #000;
background-repeat: no-repeat;
}
.camera .top_middle .red_button_container .red_button:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(100% 100% at 50% 50%, #d10f00 50%, rgba(0, 0, 0, 0) 51%) 65% 50%/90% 95%, radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0) 51%) 90% 50%/90% 90%, radial-gradient(100% 100% at 50% 50%, #d10f00 50%, rgba(0, 0, 0, 0) 51%) 50% 50%/90% 95%, radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0) 51%) 0% 50%/90% 90%, #D10F00;
background-repeat: no-repeat;
}
.camera .top_middle .lens {
overflow: hidden;
width: 25.2em;
height: 25.2em;
border-top: 2px solid #ADACB1;
border-bottom: 2px solid #211100;
position: absolute;
z-index: 1;
top: 40.5%;
left: 52.8%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23), 4px 5px 4px rgba(0, 0, 0, 0.9), 5px 5px 15px rgba(0, 0, 0, 0.9), 0 6px 6px rgba(0, 0, 0, 0.33), 0 6px 6px rgba(0, 0, 0, 0.33), 0px -4px 3px rgba(50, 50, 50, 0.55), -2px -2px 3px 5px rgba(0, 0, 0, 0.15);
background: radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(242, 242, 242, 0.02) 44%, rgba(242, 242, 242, 0.01) 47%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 255, 0) 51%, rgba(255, 0, 0, 0)) 50% 50%/100% 100%, radial-gradient(100% 100% at 0% 50%, transparent 42%, rgba(242, 242, 242, 0.08) 44%, rgba(242, 242, 242, 0.05) 47%, rgba(0, 0, 0, 0.6) 48%, rgba(0, 0, 255, 0) 51%, rgba(255, 0, 0, 0)) 12.8em 50%/100% 110%, radial-gradient(100% 100% at 100% 50%, transparent 45%, rgba(0, 0, 0, 0.3) 47%, rgba(242, 242, 242, 0.2) 48%, rgba(0, 0, 255, 0) 50%, rgba(255, 0, 0, 0)) -15.5em 50%/120% 120%, radial-gradient(100% 100% at 50% 50%, rgba(44, 44, 48, 0.08) 10%, rgba(44, 44, 48, 0.05) 40%, #2c2c30 70%) 50% 50%/100% 100%, radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.08) 10%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.02) 70%) 50% 50%/100% 100%, #353438;
background-repeat: no-repeat;
}
.camera .top_middle .lens .lens_1 {
width: 22em;
height: 22em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #111316;
background-repeat: no-repeat;
}
.camera .top_middle .lens .lens_1:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 15;
position: absolute;
content: '';
width: 150%;
border: 1px solid red;
height: 120%;
background: -webkit-radial-gradient(50% 0%, 28% 50%, rgba(34, 36, 39, 0.5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 27%, rgba(34, 36, 39, 0.6) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 45%, rgba(83, 85, 88, 0.25) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(50% 100%, 32% 50%, rgba(83, 85, 88, 0.32) 0%, rgba(255, 255, 255, 0) 100%);
}
.camera .top_middle .lens .lens_1 .lens_2 {
width: 93%;
height: 93%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border-bottom: 2px solid rgba(173, 172, 177, 0.7);
border-left: 2px solid rgba(173, 172, 177, 0.5);
border-right: 2px solid rgba(173, 172, 177, 0.5);
background: repeating-radial-gradient(circle at 50%, #3F3F43 3px, #1E1D22 2px, #414145 7px);
}
.camera .top_middle .lens .lens_1 .lens_2 .lens_3 {
width: 64%;
height: 64%;
border: 5px solid #232323;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(100% 100% at 50% 50%, #232323 10%, rgba(35, 35, 35, 0.7) 40%, rgba(35, 35, 35, 0.8) 70%) 50% 50%/100% 100%;
background-repeat: no-repeat;
}
.camera .top_middle .lens .lens_1 .lens_2 .lens_4 {
width: 99%;
height: 97%;
background: #1C1B20;
border-radius: inherit;
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
}
.camera .top_middle .lens .lens_1 .lens_2 .lens_4 .lens_5 {
width: 95%;
height: 95%;
border: 0px solid #1C1B20;
border-radius: inherit;
border-left: 2px solid #7C897C;
border-right: 2px solid #7C897C;
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(-20deg, #28272E 49%, transparent 51%) 50% 100%/100% 5.5em, radial-gradient(100% 110% at 100% 50%, rgba(57, 100, 64, 0) 49%, rgba(57, 100, 64, 0.6) 50%) -2.5em 50%/70% 95%, radial-gradient(100% 110% at 0% 50%, rgba(246, 12, 70, 0) 45%, rgba(57, 100, 64, 0.6) 47%) 6em 50%/70% 95%, #28272e;
background-repeat: no-repeat;
}
.camera .top_middle .lens .lens_1 .lens_2 .lens_4 .lens_5 .lens_6 {
width: 82%;
height: 82%;
border: 1px solid #1C1B20;
border-radius: inherit;
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
background: #1c1b20;
background-repeat: no-repeat;
}
.camera .top_middle .lens .lens_1 .lens_2 .lens_4 .lens_5 .lens_6 .lens_7 {
width: 75%;
height: 75%;
border: 4px solid #070E10;
border-right: 1px solid #3D3B42;
border-left: 1px solid #3D3B42;
border-radius: inherit;
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(130% 100% at 50% 0%, rgba(7, 14, 16, 0), rgba(255, 0, 0, 0) 28%, #070e10 40%, rgba(0, 0, 0, 0) 50%) 50% 3em/100% 100%, linear-gradient(to right, transparent, #070E10, #070E10, transparent) 50% 53%/3em 56%, radial-gradient(180% 100% at 50% 50%, rgba(57, 100, 64, 0), rgba(10, 34, 32, 0.2) 25%, #070e10, rgba(0, 0, 0, 0) 50%) 50% -3.2em/100% 100%, radial-gradient(130% 100% at 50% 50%, #070e10, #070e10 25%, rgba(10, 34, 32, 0) 30%, rgba(0, 0, 0, 0) 50%) 50% 3em/100% 100%, radial-gradient(100% 100% at 50% 50%, rgba(19, 19, 19, 0.2) 45%, white 49%, rgba(19, 19, 19, 0.2) 50%) 50% 50%/105% 115%, radial-gradient(100% 100% at 50% 50%, rgba(19, 19, 19, 0.7), rgba(3, 3, 5, 0.5) 49%, rgba(61, 59, 66, 0.5) 50%) 50% 50%/90% 100%, #396440;
background-repeat: no-repeat;
}
.camera .top_middle .under_lens {
border-radius: 50%;
width: 4.2em;
height: 4.2em;
border-bottom: 3px solid #000;
border-right: 1px solid rgba(181, 180, 184, 0.6);
box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.33), 0 6px 6px rgba(0, 0, 0, 0.33), 0 6px 6px rgba(0, 0, 0, 0.33), 0px -4px 3px rgba(50, 50, 50, 0.55), -5px -4px 3px 3px rgba(0, 0, 0, 0.55);
position: absolute;
top: 72%;
left: 72%;
transform: translate(-50%, -50%);
background: #27282C, #232227;
background-repeat: no-repeat;
}
.camera .top_middle .under_lens .inner {
width: 72%;
height: 72%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: inherit;
background: #060606;
background: radial-gradient(100% 100% at 50% 50%, #060606 48%, rgba(181, 180, 184, 0.2) 55%) 50% 50%/90% 95%, #B5B4B8;
background-repeat: no-repeat;
}
.camera .top_middle .rainbow {
width: 6.5em;
height: 9em;
position: absolute;
top: 87%;
left: 52.5%;
transform: translate(-50%, -50%);
z-index: 0;
background: linear-gradient(#E4341F 49%, #E4341F 51%) 0% 0%/20% 100%, linear-gradient(#FF9501 49%, #FF9501 51%) 20% 0%/25% 100%, linear-gradient(#FFC904 49%, #FFC904 51%) 45% 0%/25% 100%, linear-gradient(#1EB465 49%, #1EB465 51%) 68% 0%/30% 100%, linear-gradient(#03BCFF 49%, #03BCFF 51%) 100% 0%/25% 100%;
background-repeat: no-repeat;
}
.camera .top_middle .plus_button {
width: 3.5em;
height: 3.5em;
border: 2px solid #000004;
position: absolute;
top: 14.5%;
left: 29%;
border-radius: 5px;
transform: translate(-50%, -50%);
}
.camera .top_middle .plus_button .inner {
text-align: center;
background: #0B0A0E;
width: 100%;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.camera .top_middle .plus_button .inner h1 {
color: #96A2B1;
font-size: 2.3em;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.camera .top_middle .under_plus {
width: 3em;
height: 3em;
position: absolute;
top: 30%;
left: 29%;
border-radius: 50%;
transform: translate(-50%, -50%);
border-left: 2px solid rgba(255, 255, 255, 0.5);
border-top: 2px solid rgba(255, 255, 255, 0.4);
}
.camera .top_middle .under_plus .inner {
width: 2.7em;
height: 2.7em;
border-radius: inherit;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.55) 10%, rgba(255, 255, 255, 0.1) 12%, rgba(0, 0, 0, 0) 21%) 50% 0%/100% 100%, radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0.8) 51%) 50% 0%/100% 100%, radial-gradient(100% 100% at 50% 50%, rgba(63, 54, 63, 0.5), #161316 50%, rgba(255, 0, 0, 0) 51%) 50% 50%/85% 85%, radial-gradient(100% 100% at 50% 50%, rgba(63, 54, 63, 0.5), #161316 50%, rgba(255, 0, 0, 0) 51%) 50% 50%/85% 85%, #4E4E50;
background-repeat: no-repeat;
}
.camera .top_middle .top_right {
width: 13em;
height: 13.4em;
border-top: 1px solid #858488;
border-left: 1px solid #858488;
border-right: 2px solid #181818;
border-bottom: 1px solid #858488;
position: absolute;
top: 25%;
left: 87%;
transform: translate(-50%, -50%);
border-radius: 1.5em;
box-shadow: 0px -3px 1px rgba(24, 24, 24, 0.75), inset 0px 0px 15px 0px rgba(24, 24, 24, 0.4), inset 0px 0px 6px 0px rgba(255, 255, 255, 0.4);
}
.camera .top_middle .top_right .viewfinder {
width: 97%;
height: 97%;
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #262628;
background-repeat: no-repeat;
border: 1px solid #3E3E3E;
}
.camera .top_middle .top_right .viewfinder .inner_1 {
width: 83%;
height: 81%;
border-radius: inherit;
position: absolute;
top: 55%;
left: 47%;
transform: translate(-50%, -50%);
border: 2px solid #D2D2D2;
background: linear-gradient(-30deg, #3D3C40, #A4A4A4, #CACACA);
}
.camera .top_middle .top_right .viewfinder .inner_1:before {
content: '';
width: 95%;
height: 98%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(100% 100% at 50% 50%, #131313 50%, rgba(0, 0, 0, 0) 51%) 50% -2.4em/140% 95%, #1C1C1C;
background-repeat: no-repeat;
border-radius: inherit;
}
.camera .top_middle .top_right .viewfinder .inner_1 .inner_2 {
width: 80%;
height: 80%;
border: 1px solid white;
border-radius: inherit;
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(-30deg, #3D3C40, #A4A4A4, #CACACA) 50% 100%/100% 100%;
background-repeat: no-repeat;
}
.camera .top_middle .top_right .viewfinder .inner_1 .inner_2:before {
border-radius: inherit;
content: '';
width: 90%;
height: 90%;
border: 2px solid #1C1C1C;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.camera .top_middle .top_right .viewfinder .inner_1 .inner_2 .inner_3 {
width: 85%;
height: 85%;
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(100% 100% at 50% 50%, #131313 50%, rgba(0, 0, 0, 0) 51%) 50% -1.3em/140% 95%, #1C1C1C;
background-repeat: no-repeat;
}
.camera .top_middle .top_right .viewfinder .inner_1 .inner_2 .inner_3 .hole {
width: 1.7em;
height: 1.7em;
background: #F60C46;
border-radius: 2px;
position: absolute;
top: 57%;
left: 47%;
transform: translate(-50%, -50%);
background: #DDDDDB;
}
.camera .top_middle .top_right .viewfinder .inner_1 .inner_2 .inner_3 .hole:before {
z-index: 3;
width: 87%;
height: 50%;
content: '';
position: absolute;
top: -1.8em;
left: .15em;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), transparent) 50% 100%/95% 100%;
background-repeat: no-repeat;
}
.camera .top_middle .top_right .viewfinder:before {
z-index: 3;
width: 100%;
height: 100%;
content: '';
position: absolute;
background: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0.5) 48%, rgba(0, 0, 0, 0) 55%) 50% -7em/100% 95%, linear-gradient(to right, rgba(0, 0, 0, 0.4) 49%, rgba(0, 0, 0, 0.4) 51%) 100% 50%/12% 95%;
background-repeat: no-repeat;
}
.camera .top_middle .top_right .shadows_middle {
z-index: 8;
position: absolute;
width: 59%;
height: 30%;
top: 25%;
left: 47%;
transform: translate(-50%, -50%);
background: radial-gradient(105% 80% at 50% 100%, rgba(246, 12, 70, 0) 25.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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