이 글에서는 순수 CSS3로 그린 9가지 레트로 카메라 특수 효과 코드를 공유하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
먼저 렌더링을 살펴보겠습니다.
PS:
어떤 사람들은 이러한 것들이 그다지 실용적이지 않고 쓸모가 없다고 말할 것입니다. 처음에는 그렇게 생각했는데 나중에 생각이 바뀌었어요. 우선, 현재로서는 실용성이 강하지 않거나 적용 범위가 매우 좁습니다. 그러나 실제로 이는 창의적 사고, CSS3의 포괄적인 적용 및 HTML 코드 최적화를 향상시킬 수 있습니다.
사용에 익숙해지면 점차 리팩토링이 더 신중해지고 편리해진다는 것을 알게 될 것입니다. 둘째, 학생으로서 개발 경험이 약간 부족합니다. 고품질의 기사를 공유하는 것은 정말 쉽지 않습니다. , 그래서 CSS3 애니메이션의 포인트를 찾아 여러분께 일이나 생활에 작은 재미를 선사하기 위해 만든 재미있는 데모를 공유했습니다. 이것이 제가 공유하려는 원래 의도입니다.
물론, 앞으로 더 많은 개발 경험을 쌓기 시작하면 더 귀중한 기사를 여러분과 공유할 수 있기를 바라겠습니다.
좋아요, 위의 효과는 온라인에서 찾은 디자인 초안을 기반으로 CSS3를 사용하여 복원되었습니다. 하나씩 공유하겠습니다.
먼저 컨테이너가 필요합니다:
<div></div>
및 필요한 CSS 스타일:
.container{ width:600px; height:600px; margin:0 auto; overflow:hidden; } .style_1,.style_2,.style_3,.style_4,.style_5,.style_6,.style_7,.style_8,.style_9{ width:200px; height:200px; float:left; position:relative; } .style_1,.style_5,.style_9{ background-color:#f7b234; } .style_2,.style_6,.style_7{ background-color:#60a4ac; } .style_3,.style_4,.style_8{ background-color:#f47752; }
첫 번째 카메라
html 코드:
<div></div><div></div><div></div>
css 코드:
.camera_style_1{ width:120px; height:86px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-43px; } .camera_style_1 .header{ width:100%; height:15px; } .camera_style_1 .main{ width:100%; height:55px; background-color:#e17c10; border-top:8px solid #016675; border-bottom:8px solid #016675; border-radius:2px; border-top-right-radius:0; } .camera_style_1 .left{ width:0; height:0; border:12px solid transparent; border-bottom:8px solid #cf7323; position: absolute; top:-5px; left:5px; } .camera_style_1 .left:after,.camera_style_1 .left:before{ content:''; display:block; width:14px; height:4px; background-color:#e07b0f; position: absolute; top:1px; left:-7px; } .camera_style_1 .left:before{ background-color:#016675; top:-3px; border-top-left-radius:1px; border-top-right-radius:1px; } .camera_style_1 .right{ width:80px; height:14px; background-color:#016675; position: absolute; top:1px; right:0; border-top-left-radius:1px; border-top-right-radius:1px; } .camera_style_1 .right:after{ content:''; display:block; width:8px; height:8px; border-radius:50%; background-color:#fff; position: absolute; top:7px; left:4px; } .camera_style_1 .right:before{ content:''; display:block; width:16px; height:4px; background-color:#e17c10; position: absolute; top:-4px; right:5px; } .camera_style_1 .whiteBlock{ width:5px; height:11px; border-left:19px solid #fff; border-right:19px solid #fff; position: absolute; top:5px; right:7px; } .camera_style_1 .round{ width:44px; height:44px; border-radius: 50%; background-color:#016675; border:6px solid #fff; position: absolute; top:24px; left:32px; } .camera_style_1 .round:after{ content: ''; display:block; width:34px; height:34px; background-color:#3e3c38; border-radius:50%; position: absolute; top:5px; left:5px; } .camera_style_1 .round:before{ content: ''; display:block; width:10px; height:5px; background-color:#fff; position: absolute; top:38px; right:-32px; }
두 번째 카메라
html 코드:
<div></div> <div></div><div></div>
css 코드:
.camera_style_2{ width:120px; height:90px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-45px; } .camera_style_2 .header{ width:100%; height:15px; } .camera_style_2 .main{ width:100%; height:50px; background-color:#50544e; border-top:15px solid #b5475d; border-bottom:10px solid #b5475d; border-radius:6px; border-top-right-radius:0; } .camera_style_2 .round{ width:56px; height:56px; background-color:#fff; border:4px solid #50544e; border-radius:50%; position: absolute; top:22px; left:28px; } .camera_style_2 .round:after{ content:''; display:block; width:34px; height:34px; background-color:#252522; border-radius:50%; border:5px solid #b5475d; position: absolute; top:6px; left:6px; } .camera_style_2 .left{ width:3px; height:7px; border-left:15px solid #50544e; border-right:20px solid #50544e; position: absolute; top:8px; left:5px; } .camera_style_2 .left:after{ content:''; display:block; width:13px; height:6px; background-color:#fff; position: absolute; top:11px; left:7px; } .camera_style_2 .right{ width:73px; height:14px; background-color:#b5475d; border-top-left-radius:6px; border-top-right-radius:6px; position: absolute; right:0; top:1px; } .camera_style_2 .right:after{ content:''; display:block; width:9px; height:9px; background-color:#dbdbcc; border-radius:50%; position: absolute; top:10px; left:8px; } .camera_style_2 .right:before{ content:''; display:block; width:4px; height:12px; border-left:15px solid #fff; border-right:20px solid #fff; position: absolute; top:7px; right:8px; }
세번째 카메라
html 코드:
<div></div> <div></div> <div></div><div></div>
css 코드:
.camera_style_3{ width:120px; height:106px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-53px; } .camera_style_3 .main{ width:100%; height:71px; background-color:#f2a313; border-top-left-radius:10px; border-top-right-radius:10px; } .camera_style_3 .main:before{ content:''; display:block; width:56px; height:9px; background-color:#744f2d; border-top-left-radius:2px; border-top-right-radius:2px; position:absolute; top:-9px; left:32px; } .camera_style_3 .main:after{ content:''; display:block; width:100%; height:15px; background-color:#e1991c; position: absolute; bottom:35px; left:0; } .camera_style_3 .footer{ width:100%; height:35px; background-color:#744f2d; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .camera_style_3 .footer:after{ content:''; display:block; width:80%; height:3px; background-color:#342316; border-radius:3px; position: absolute; bottom:16px; left:10%; } .camera_style_3 .left{ width:30px; height:10px; border-radius:10px; background-color:#342316; position: absolute; top:5px; left:5px; } .camera_style_3 .left:after{ content:''; display:block; width:14px; height:14px; background-color:#fff; border-radius:50%; position: absolute; top:13px; left:7px; } .camera_style_3 .center{ width:42px; height:40px; border:5px solid #fff; border-radius:50%; position: absolute; top:3px; left:34px; } .camera_style_3 .center:after{ content:''; display:block; width:32px; height:30px; background-color:#342316; border-radius:50%; position: absolute; top:5px; left:5px; } .camera_style_3 .right{ width:25px; height:25px; background-color:#342316; border-radius:50%; position: absolute; top:5px; right:5px; } .camera_style_3 .right:after{ content:''; display:block; width:13px; height:13px; background-color:#fff; border-radius:50%; position: absolute; top:30px; right:0; }
네 번째 카메라
html 코드:
<div></div> <div></div> <div></div><div></div>
css 코드:
.camera_style_4{ width:120px; height:90px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-45px; background-color:#f2a313; border-radius:14px; } .camera_style_4:after,.camera_style_4:before{ content:''; display:block; width:130px; height:10px; background-color:#744f2d; border-radius:10px; position: absolute; left:-5px; top:15px; z-index:3; } .camera_style_4:after{ top:80px; } .camera_style_4 .header{ width:100%; height:22px; } .camera_style_4 .left{ width:26px; height:8px; background-color:#744f2d; border-top-left-radius:50%; border-top-right-radius:50%; position: absolute; top:-8px; left:12px; } .camera_style_4 .center{ width:28px; height:28px; background-color:#744f2d; border-radius:4px; position: absolute; top:-13px; left:46px; } .camera_style_4 .center:after{ content:''; display:block; width:18px; height:18px; background-color:#fff; border-radius:4px; position: absolute; top:5px; left:5px; } .camera_style_4 .right{ width:10px; height:10px; background-color:#322317; border-radius:50%; position: absolute; top:3px; right:22px; } .camera_style_4 .right:after{ content:''; display:block; width:10px; height:10px; background-color:#322317; border-radius:50%; position: absolute; top:0; left:13px; } .camera_style_4 .main{ width:54px; height:54px; border:7px solid #fff; border-radius:50%; position: absolute; top:19px; left:26px; z-index:4; } .camera_style_4 .main:after{ content:''; display:block; width:38px; height:38px; background-color:#342316; border-radius:50%; position: absolute; top:8px; left:8px; }
다섯 번째 카메라:
html 코드:
<div></div><div></div><div></div><div></div><div></div> <div></div> <div></div>
css 코드:
.camera_style_5{ width:120px; height:90px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-43px; } .camera_style_5 .header{ width:100%; height:16px; } .camera_style_5 .left{ width:20px; height:12px; background-color:#3e3d36; position: absolute; top:2px; } .camera_style_5 .left:after{ content:''; display:block; width:8px; height:5px; background-color:#3e3d36; position: absolute; top:9px; left:6px; } .camera_style_5 .center{ width:65px; height:16px; position: absolute; top:0; left:33px; } .camera_style_5 .center_innerLeft{ width:20px; height:4px; background-color:#006674; position: absolute; top:12px; left:0; } .camera_style_5 .center_innerLeft:before{ content:''; display:block; width:10px; height:5px; background-color:#3f3d39; position: absolute; top:-6px; right:0; } .camera_style_5 .center_innerLeft:after{ content:''; display:block; width:4px; height:2px; background-color:#3f3d39; position: absolute; top:-2px; right:3px; } .camera_style_5 .center_innerRight{ width:45px; height:10px; background-color:#006674; position: absolute; top:6px; right:0; } .camera_style_5 .center_innerRight_body{ width:18px; height:7px; background-color:#fff; position: absolute; top:3px; right:12px; } .camera_style_5 .center_innerRight_body:before,.camera_style_5 .center_innerRight_body:after{ content:''; display:block; width:6px; height:6px; background-color:#fff; border-radius:50%; position: absolute; top:0; left:-10px; } .camera_style_5 .center_innerRight_body:after{ left:21px; } .camera_style_5 .right{ width:16px; height:8px; background-color:#3e3d36; position: absolute; top:6px; right:0; } .camera_style_5 .right:after{ content:''; display:block; width:6px; height:4px; background-color:#3e3d36; position: absolute; top:6px; left:5px; } .camera_style_5 .main{ width:100%; height:52px; background-color:#e17c10; border-top:10px solid #016675; border-bottom:12px solid #016675; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } .camera_style_5 .main_bg{ width:60px; height:40px; background-color:#006674; position: absolute; top:26px; left:30px; } .camera_style_5 .main_bg:before,.camera_style_5 .main_bg:after{ content:''; display:block; width:6px; height:6px; background-color:#fff; border-radius:50%; position: absolute; top:-8px; left:-6px; } .camera_style_5 .main_bg:after{ left:70px; } .camera_style_5 .outterRound{ width:46px; height:46px; border:8px solid #fff; border-radius:50%; position: absolute; top:26px; left:29px; } .camera_style_5 .outterRound:before{ content:''; display:block; width:15px; height:7px; background-color:#fff; -webkit-transform:rotate(-38deg); transform:rotate(-38deg); position: absolute; top:36px; left:-16px; } .camera_style_5 .outterRound:after{ content:''; display:block; width:5px; height:5px; background-color:#3f3d39; border-radius:50%; position: absolute; top:39.5px; left:-14px; } .camera_style_5 .innerRound{ width:34px; height:34px; background-color:#3e3c38; border:7px solid #e17c10; border-radius:50%; position: absolute; top:33px; left:36px; }
여섯 번째 카메라
html 코드:
<div></div><div></div> <div></div> <div></div> <div></div>
CSS 코드:
일곱 번째 카메라
html 코드:
.camera_style_6{ width:120px; height:100px; margin:0 auto; position: absolute; top:50%; left:50%; margin-left:-60px; margin-top:-56px; } .camera_style_6 .header{ width:100%; height:30px; } .camera_style_6 .top{ width:24px; height:24px; background-color:#fff; border:8px solid #bc4c5f; border-radius:50%; position: absolute; top:-11px; left:40px; } .camera_style_6 .top:after{ content:''; display:block; width:14px; height:5px; background-color:#bc4c5f; position: absolute; bottom:-10px; left:5px; } .camera_style_6 .main{ width:100%; height:75px; background-color:#bd4b60; border-radius:10px; } .camera_style_6 .main:before{ content:''; display:block; width:100%; height:40px; background-color:#555953; position: absolute; bottom:8px; left:0; } .camera_style_6 .main_left{ width:13px; height:6px; background-color:#fff; position: absolute; top:35px; left:8px; } .camera_style_6 .main_left:after{ content:''; display:block; width:6px; height:6px; background-color:#fff; border-radius:50%; position: absolute; top:0; right:-9px; } .camera_style_6 .main_right{ width:2px; height:12px; border-left:14px solid #fff; border-right:18px solid #fff; position: absolute; top:35px; right:6px; } .camera_style_6 .main_round{ width:46px; height:46px; background-color:#be4a60; border-radius:50%; border:6px solid #fff; position: absolute; bottom:-3px; left:14px; } .camera_style_6 .main_round:after{ content:''; display:block; width:36px; height:36px; background-color:#252522; border-radius:50%; position: absolute; top:5px; left:5px; } .camera_style_6 .main_line,.camera_style_6 .main_line:before,.camera_style_6 .main_line:after{ width:12px; height:5px; background-color:#3e3d36; position: absolute; top:61px; left:78px; } .camera_style_6 .main_line:before{ content:''; display:block; top:8px; left:0; } .camera_style_6 .main_line:after{ content:''; display:block; top:16px; left:0; }
css 코드:
<div></div> <div></div>
8번째 카메라
html 코드:
.camera_style_7{ width:120px; height:80px; background-color:#c34e5c; border-radius:10px; position: absolute; top:50%; left:50%; margin-top:-40px; margin-left:-60px; } .camera_style_7:before,.camera_style_7:after{ content:''; display:block; width:18px; height:5px; background-color:#51524d; border-top-left-radius:4px; border-top-right-radius:4px; position: absolute; top:-5px; } .camera_style_7:before{ left:10px; } .camera_style_7:after{ right:10px; } .camera_style_7 .main{ width:100%; height:35px; background-color:#4f534d; position: absolute; top:28px; left:0; } .camera_style_7 .main:before{ content:''; display:block; width:100%; height:5px; background-color:#4f534d; position: absolute; top:-8px; left:0; } .camera_style_7 .main:after{ content:''; display:block; width:40px; height:96px; background-color:#4f534d; border-radius:12px; position: absolute; top:-36px; left:40px; z-index:1; } .camera_style_7 .whiteBlock{ width:50px; height:7px; border-left:16px solid #fff; border-right:16px solid #fff; position: absolute; top:14px; left:19px; } .camera_style_7 .whiteBlock:before{ content:''; display:block; width:24px; height:14px; background-color:#fff; border-radius:3px; position: absolute; top:-44px; left:13px; z-index:2; } .camera_style_7 .whiteBlock:after{ content:''; display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; position: absolute; top:-38px; left:70px; } .camera_style_7 .round{ width:28px; height:28px; background-color:#c34e5c; border:4px solid #fff; border-radius:50%; position: absolute; top:0; left:42px; z-index:2; } .camera_style_7 .round:after{ content:''; display:block; width:18px; height:18px; background-color:#3e3c38; border-radius:50%; position: absolute; top:5px; left:5px; }
css 코드:
<div></div> <div></div>
9번째 카메라
html 코드:
.camera_style_8{ width:120px; height:60px; background-color:#e99e1e; border-radius:12px; border-top:13px solid #744f2d; border-bottom:7px solid #f2a313; position: absolute; top:50%; left:50%; margin-top:-40px; margin-left:-60px; } .camera_style_8:before{ content:''; display:block; width:40px; height:100px; background-color:#3e3c38; border-top-left-radius:22px 50px; border-top-right-radius:12px 10px; border-bottom-left-radius:20px 40px; border-bottom-right-radius:16px 6px; position: absolute; bottom:-10px; left:-20px; } .camera_style_8:after{ content:''; display:block; width:18px; height:7px; background-color:#fff; border-radius:28px/10px; position:absolute; top:-24px; left:-4px; } .camera_style_8 .round{ width:64px; height:64px; background-color:#fff; border:10px solid #f2a313; border-radius:50%; position: absolute; top:-12px; left:23px; z-index:3; } .camera_style_8 .round:after{ content:''; display:block; width:30px; height:30px; background-color:#3e3c38; border:10px solid #764e2d; border-radius:50%; position: absolute; top:7px; left:7px; } .camera_style_8 .whiteBlock{ width:64px; height:25px; background-color:#f2a313; border-top-left-radius:50%; border-top-right-radius:50%; position: absolute; top:-20px; left:33px; z-index:1; } .camera_style_8 .whiteBlock:before{ content:''; display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; position: absolute; top:23px; left:74px; } .camera_style_8 .whiteBlock:after{ content:''; display:block; width:7px; height:7px; background-color:#fff; border-radius:50%; position: absolute; top:36px; left:76px; }
css 코드:
<div></div> <div></div> <div></div><div></div>
PS: 길이가 좀 길지만, 코드가 제공되오니 관심 있으신 분들은 시도해보시면 됩니다.
더 멋진 CSS3, html5, javascript 특수 효과 코드가 모두 포함되어 있습니다: js 특수 효과 컬렉션!
위 내용은 순수 CSS3로 그린 9가지 복고풍 카메라 특수 효과 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!