纯css绘制一个相机
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* fossheim.io */ /* Tutorial: https://fossheim.io/writing/posts/css-polaroid-camera/ */ * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: lightblue; background-image: radial-gradient(#9CDCE0, #9CD4E0); } .camera { display: block; width: 570px; height: 470px; margin-left: auto; margin-right: auto; margin-top: 100px; margin-top: calc(50vh - 235px); position: relative; } .camera .bottom { display: block; width: 100%; height: 165px; position: absolute; bottom: 0; border-radius: 11px 11px 30px 30px; background-image: radial-gradient(#E1DFE2 60%, transparent 60%), radial-gradient(#E1DFE2 60%, transparent 60%), linear-gradient(90deg, #E1DFE2, #EAE8EB), linear-gradient(90deg, #EAE8EB, #E1DFE2), linear-gradient(90deg, #85817E, rgba(47,43,43,0) 5% 95%, #696461), linear-gradient(#4E4A49, #100C0D), linear-gradient(#312F32, #2A2A27, #363233); background-size: 50px 60px, 50px 60px, 185px 30px, 185px 30px, 100% 100%, 100% 20px, 100% 100%; background-repeat: no-repeat; background-position: 160px -26px, 360px -26px, top right, top left, top left, bottom left, bottom left; box-shadow: -1px 3px 2px 0px rgba(249,247,248, 0.65) inset; } .camera .bottom .printer { display: block; width: 470px; height: 40px; background-color: red; margin-left: auto; margin-right: auto; margin-top: 60px; border-radius: 3px; background-image: linear-gradient(90deg, #474548 90%, #343233 90%), linear-gradient(90deg, #0E090D 10%, #4A4849 10%), linear-gradient(#4C4A4D 4%, #161214 9% 20%, #484445 30% 55%, #1A1617 80% 93%, #B0AFAD 99%); background-size: 8px 100%, 8px 100%, 100% 100%; background-repeat: no-repeat; background-position: top left, top right; } .camera .bottom .labels .rainbow { display: block; width: 40px; height: 46px; position: absolute; top: 100px; left: 80px; background-image: linear-gradient( #1D160F 5%, /* Black*/ #0E9EE0 5% 14%, /* Blue */ #1F211A 14% 19%, /* Black */ #0EAE4F 19% 32%, /* Green */ #2B2106 32% 37%, /* Black */ #FFB404 37% 50%, /* Yellow */ #2A1303 50% 55%, /* Black */ #FE8204 55% 68%, /* Orange */ #292313 68% 80%, /* Black */ #E02D28 80% /* Red */ ); } .camera .bottom .labels .logo { font-family: "Helvetica Neue", "Helvetica", sans-serif; font-size: 24px; font-weight: 600; color: #CDCCC8; text-align: center; margin-top: 8px; } .camera .bottom .toggle-container { display: block; width: 135px; height: 35px; background-color: red; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; border-radius: 0 0 10px 10px; background-image: radial-gradient(#353334, #4C4849 40%, transparent 70%), radial-gradient(#29272A, #464445 40%, transparent 70%), linear-gradient(#8B8786 10%, #5E5A5B 20% 65%, #969291); background-size: 70px 70px, 70px 70px, 100% 100%; background-repeat: no-repeat; background-position: top -25px left -40px, top -15px right -35px, top right; } .camera .bottom .toggle-container .toggle { position: absolute; display: block; width: 100px; height: 20px; top: 6px; left: 0; right: 0; margin-left: auto; margin-right: auto; border-radius: 10px; background-image: linear-gradient( #747371 2%, #525055 2%, #565152, #535250 ); border: 0.5px solid #141011; } .camera .bottom .toggle-container .toggle .handle { display: block; position: absolute; width: 20px; height: 20px; right: 0; top: -2px; background-color: red; background-image: radial-gradient(#525051, #4B4746); border-radius: 10px; border: 0.5px solid rgba(133, 129, 128, 0.15); box-shadow: -1px 5px 5px #181619; } .camera .top { display: block; position: relative; width: 540px; height: 320px; margin-left: auto; margin-right: auto; border-radius: 35px 35px 0 0; background-image: linear-gradient( 90deg, rgba(243,243,243,0.75), rgba(243,243,243,0) 15% 85%, rgba(243,243,243,0.75) ), linear-gradient(#FEFEFE, #F9F7F8), linear-gradient(#DDD9DA, #E2DEDF, #EAE8EB, #F3F1F4); background-size: 100%, 100% 3px, 100%; background-repeat: no-repeat; box-shadow: -1px 1px 2px 3px rgba(249,247,248, 0.85) inset; } .camera .top .lens { position: absolute; display: block; width: 210px; height: 210px; border-radius: 105px; background-color: black; top: 15px; left: 0; right: 0; margin-left: auto; margin-right: auto; background-image: radial-gradient(transparent, #000000), radial-gradient(rgba(51,53,54,0.4), transparent), radial-gradient( #2A282B 0% 27%, /* dark body 4 */ #070508 27.5% 28%, /* dark shadow 4 */ #4E4C4F 28.5% 28.6%, /* highlight 3 */ #2A282B 28.7% 29.3%, /* dark body 3 */ #070508 29.5% 29.8%, /* dark shadow 3 */ #4E4C4F 30% 30.5%, /* highlight 2 */ #2A282B 30.5% 32.5%, /* dark body 2 */ #070508 33% 33.5%, /* dark shadow 2 */ #4E4C4F 34% 34.5%, /* highlight 1 */ #2A282B 34.5% 36.5%, /* dark body 1 */ #070508 37% 37.5%, /* dark shadow 1 */ #3D3B40 38% 38.5%, /* shadow 8 */ #908E91 39% 39.5%, /* highlight 8 */ #3D3B40 40% 40.5%, /* shadow 7 */ #908E91 41% 41.5%, /* highlight 7 */ #3D3B40 42% 42.5%, /* shadow 6 */ #908E91 43% 43.5%, /* highlight 6 */ #3D3B40 44% 44.5%, /* shadow 5 */ #908E91 45% 45.5%, /* highlight 5 */ #3D3B40 46% 46.5%, /* shadow 4 */ #908E91 47% 47.5%, /* highlight 4 */ #3D3B40 48% 48.5%, /* shadow 3 */ #908E91 49% 49.5%, /* highlight 3 */ #3D3B40 50% 50.5%, /* shadow 2 */ #908E91 51% 51.5%, /* highlight 2 */ #3D3B40 52% 52.5%, /* shadow 1 */ #908E91 53% 54%, /* highlight 1 */ #241E1E 54.5% 57%, /* outer */ #131114 57% 59%, /* shadow */ #3C3A3D 59% 60%, /* highlight */ #241E1E 60% /* outer */ ); background-size: 350px 350px, 350px 350px, 100%; background-position: bottom -100px left, top -120px right 10px, center center; background-repeat: no-repeat; box-shadow: 15px 55px 60px 5px #767072; } .camera .top .lens .glass { display: block; width: 70px; height: 70px; border-radius: 40px; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 70px; background-image: radial-gradient( rgba(119, 109, 80, 0.85), transparent 40% ), radial-gradient( rgba(51,180,105,0.25) 13%, rgba(119,159,59,0.2) 53% 70%, rgba(119,159,59,0) 68% ), radial-gradient( rgba(51,180,105,0.25) 23%, rgba(51,180,105,0.2) 53% 70%, rgba(51,180,105,0) 68% ), radial-gradient( #2C1F28, #241921 55%, #080609 70% ); background-size: 100%, 190% 100%, 190% 100%, 100%; background-repeat: no-repeat; background-position: center -10px, -30px -48px, -30px 55px, center; } .camera .top .shutter { display: block; width: 57px; height: 57px; position: absolute; border-radius: 30px; bottom: 30px; left: 25px; background-image: radial-gradient(#DA1107 51%, #ED4B1D 53.5%); background-size: 200% 200%; background-repeat: no-repeat; background-position: bottom -10px center; border: 1px solid #520000; box-shadow: 1px 1px 1px rgba(255,255,255,0.2) inset, 0 0 2px 6px #DFDAD7, 1px 6px 10px #66514D, -1px -7.5px 1px white; } .camera .top .flash { position: absolute; width: 90px; height: 160px; border-radi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0