Using a purely CSS-generated camera effect, the relevant CSS code is as follows:
. container {Position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); border-radius:5px; box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7); -webkit-animation:5s angle Infinite; Animation:5s angle Infinite;}. Camera-top,.camera-mid,.camera-bottom {width:360px;}. camera-top {height:60px; Background:-webkit-linear-gradient (left, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%); Background:linear-gradient (to right, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%); border:1px solid #DCDCDC; border-top-left-radius:5px;}. Camera-top:before {display:block; Content: "; Position:absolute; Top: -20px; right:0; width:210px; height:20px; Background:-webkit-linear-gradient (left, #f5f5f5 0, #f5f5f5 174px, #e2e2e2 100%); Background:linear-gradient (to right, #f5f5f5 0, #f5f5f5 174px, #e2e2e2 100%); border:1px solid #DCDCDC; border-top-left-radius:5px; Border-top-right-radius:5px; Border-bottom:none; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}. Camera-top. Zoom {position:absolute; Top: -15px; left:30px; width:42px; height:9px; Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border:1px solid #A3A3A3; border-top-left-radius:3px; border-top-right-radius:3px; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}. Camera-top. zoom:before {display:block; Content: "; position:relative; Top: -6px; left:50%; -webkit-transform:translatex (-50%); Transform:translatex (-50%); width:20px; height:4px; Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 50%, #b0b0b0 100%); Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 50%, #b0b0b0 100%); border:1px solid #A3A3A3; border-top-left-radius:3px; border-top-right-radius:3px;}. Camera-top. Zoom:afteR {display:block; Content: "; position:relative; top:3px; left:50%; -webkit-transform:translatex (-50%); Transform:translatex (-50%); width:46px; height:4px; Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border:1px solid #A3A3A3; Border-bottom:none; border-top-left-radius:3px; border-top-right-radius:3px;}. Camera-top. mode-changer {position:absolute; Top: -20px; left:82px; width:60px; height:16px; Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border:1px solid #A3A3A3; border-radius:3px; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}. Camera-top. mode-changer:after {display:block; Content: "; Position:absOlute; top:16px; left:50%; -webkit-transform:translatex (-50%); Transform:translatex (-50%); width:50px; height:2px; Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border:1px solid #A3A3A3; Border-bottom:none;}. Camera-top. sides {width:100%;}. Camera-top. Sides:before,.camera-top. sides:after {display:block; Content: "; Position:absolute; top:24px; width:8px; height:30px; Background:-webkit-linear-gradient (top, #828181 0, #696767 10%, #4f4d4d 50%, #403e3f 100%); Background:linear-gradient (to bottom, #828181 0, #696767 10%, #4f4d4d 50%, #403e3f 100%); border:1px solid #3E3C3D; border-radius:2px; box-shadow:0px 3px 5px-1px rgba (0, 0, 0, 0.5);}. Camera-top. Sides:before {left: -4px; border-top-left-radius:3px; border-bottom-left-radius:3px;}. Camera-top. sides:after {RIGht: -4px; border-top-right-radius:3px; border-bottom-right-radius:3px;}. Camera-top. range-finder {position:absolute; top:10px; left:105px; width:30px; height:20px; Background: #3E3C3D; border-radius:3px; Box-shadow:inset 0 0 5px 3px #333132;}. Camera-top. range-finder:before {display:block; Content: "; Position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); width:12px; height:12px; Background: #797878; border-radius:100%;}. Camera-top. focus {Position:absolute; Top: -14px; left:156px; width:15px; height:15px; Background: #3F3D3E; border-radius:100%; Box-shadow:inset 0 0 4px 3px #2D2B2B, inset 0 4px 5px 0 #F5F5F5, inset 0-3px 4px-2px #A3A2A2;}. Camera-top. Red {position:absolute; top:5px; left:165px; width:30px; height:30px; Background: #DC2839; border-radius:100%;}. Camera-top. view-finder {position:absolute; left:210px; width:48px; height:30px; Background:-webkit-radial-gradient (center ellipse, #828181 0, #403e3f 85%, #403e3f 100%); Background:radial-gradient (ellipse at center, #828181 0, #403e3f 85%, #403e3f 100%); BORDER:3PX solid #312F2F; border-radius:4px; Box-shadow:inset 0 8px 8px-8px #FDFDFD;}. Camera-top. Flash {position:absolute; Top: -6px; right:20px; width:58px; height:46px; Background:-webkit-radial-gradient (center ellipse, #828181 0, #403e3f 70%, #403e3f 100%); Background:radial-gradient (ellipse at center, #828181 0, #403e3f 70%, #403e3f 100%); border:2px solid #312F2F; border-radius:3px; Box-shadow:inset 0 8px 8px-8px #FDFDFD;}. Camera-top. Flash:before,.camera-top. flash:after {display:block; Content: "; Position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%);}. Camera-top. flash:before {width:90%; height:70%; Background:-webkit-radial-gradient (center ellipse, #696767 0, #1e1e1e 50%, #1e1e1e 10%); Background:radial-gradient (ellipse at center, #696767 0, #1e1e1e 50%, #1e1e1e 100%);}. Camera-top. flash:after {width:16px; height:14px; Background: #797979; BORDER-TOP-LEFT-RADIUS:8PX 2px; BORDER-TOP-RIGHT-RADIUS:8PX 2px; BORDER-BOTTOM-LEFT-RADIUS:8PX 2px; Border-bottom-right-radius:8px 2px;}. Camera-top. Flash. light {position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); width:20px; height:20px; Background:-webkit-radial-gradient (center ellipse, #ffffff 0, Rgba (255, 255, 255, 0) 100%); Background:radial-gradient (ellipse at center, #ffffff 0, Rgba (255, 255, 255, 0) 100%); border-radius:100%; Z-index:2; -webkit-animation:1s Flash Infinite; Animation:1s flash Infinite;}. Camera-mid {position:relative; height:130px; Background:-webkit-linear-gradient (left, #e4e4e4 0, #fafafa 10%, #fafafa 90%, #e4e4e4 100%); Background:linear-gradient (to right, #e4e4e4 0%, #Fafafa 10%, #fafafa 90%, #e4e4e4 100%); border:1px solid #DCDCDC; Border-top:none; Border-bottom:none; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}. Camera-mid. sensor {position:absolute; top:40px; left:105px; width:30px; height:30px; Background: #545252; border:2px solid #545252; border-radius:100%; Box-shadow:inset 0 12px 12px-10px #FDFDFD, 0 2px 5px 1px rgba (0, 0, 0, 0.3);}. Camera-mid. Sensor:before,.camera-mid. sensor:after {display:block; Content: "; Position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%);}. Camera-mid. sensor:before {width:20px; height:20px; Background:-webkit-linear-gradient (top, #E9E9E9 0, #BDBDBD 100%); Background:linear-gradient (to bottom, #E9E9E9 0, #BDBDBD 100%); border-radius:100%;}. Camera-mid. sensor:after {width:12px; height:12px; Background: #FAFAFA; border-radius:100%; box-shadow:0 2px 3px 0 #747474;}. Camera-mid. Lens {PositioN:absolute; Top: -20px; left:130px; width:155px; height:155px; Background:-webkit-radial-gradient (center ellipse, #000000 0, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3 F 40%, #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100 %); Background:radial-gradient (ellipse at center, #000000 0, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3f 40% , #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100%); border:1px solid #B6B7B8; border-radius:100%; Box-sizing:border-box; box-shadow:0 7px 15px-2px rgba (0, 0, 0, 0.4), inset 0-2px 15px-2px rgba (0, 0, 0, 0.2), inset 0 7px 15px-2px #FFF;}. Camera-mid. lens:before {display:block; Content: "; Position:absolute; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); width:25px; height:25px; Background:rgba (0, 0,0, 0.7); border-radius:100%; Box-shadow:inset 0 5px 3px-2px rgba (255, 255, 255, 0.5), inset 0-5px 20px-8px rgba (255, 255, 255, 0.5);}. Camera-bottom {height:16px; Background:-webkit-linear-gradient (left, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%); Background:linear-gradient (to right, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%); border:1px solid #DCDCDC; Border-bottom:none; border-bottom-left-radius:5px; border-bottom-right-radius:5px; Box-shadow:inset 0 15px 15px-15px #FDFDFD, inset 0-12px 12px-10px #797979;} @-webkit-keyframes Flash {0% {width:0; height:0; } 20% {width:200px; height:200px; } 25% {width:0; height:0; } 45% {width:200px; height:200px; } 50% {width:0; height:0; } 100% {width:0; height:0; }} @keyframes Flash {0% {width:0; height:0; } 20% {width:200px; height:200px; } 25% {width:0; height:0; } 45% {width:200px; height:200px; } 50% {width:0; height:0; } 100% {width:0; height:0; }}@-webkit-keyframes Angle {0% {-webkit-transform:translate ( -50%, -50%) rotate (0deg); Transform:translate ( -50%, -50%) rotate (0deg); box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7); } 25% {-webkit-transform:translate ( -50%, -50%) rotate (2deg); Transform:translate ( -50%, -50%) rotate (2deg); box-shadow:10px 30px 50px-20px rgba (0, 0, 0, 0.7); } 75% {-webkit-transform:translate ( -50%, -50%) rotate ( -2deg); Transform:translate ( -50%, -50%) rotate ( -2deg); Box-shadow: -10px 30px 50px-20px rgba (0, 0, 0, 0.7); } 100% {-webkit-transform:translate ( -50%, -50%) rotate (0deg); Transform:translate ( -50%, -50%) rotate (0deg); box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7); }} @keyframes Angle {0% {-webkit-transform:translate ( -50%, -50%) rotate (0deg); Transform:translate ( -50%, -50%) rotate (0deg); box-shadow:0px 30px50px-20px rgba (0, 0, 0, 0.7); } 25% {-webkit-transform:translate ( -50%, -50%) rotate (2deg); Transform:translate ( -50%, -50%) rotate (2deg); box-shadow:10px 30px 50px-20px rgba (0, 0, 0, 0.7); } 75% {-webkit-transform:translate ( -50%, -50%) rotate ( -2deg); Transform:translate ( -50%, -50%) rotate ( -2deg); Box-shadow: -10px 30px 50px-20px rgba (0, 0, 0, 0.7); } 100% {-webkit-transform:translate ( -50%, -50%) rotate (0deg); Transform:translate ( -50%, -50%) rotate (0deg); box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7); }}
Online preview: http://igeekbar.com/igclass/code/af644b88-36ea-4987-ac87-19dbef222f34.htm
Front-end effects: Flash camera effects generated using CSS