Front-end effects: Flash camera effects generated using CSS

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.