纯CSS3制作九款可爱复古相机

前言

掐指一算，快两个月没写博客分享了。好吧，我就只是在准备校招而已。现在已经有满意的offer了，所以我就回来啦！这两个月过得挺煎熬也挺充实的。具体细说估计得长篇大论，我就不闲扯了。总之呢，越努力，越幸运！

正文

先看看制作出来的效果图：





PS： 有人会说，这些东西实用性不强，没啥用。一开始我也是这么觉得，但后来我就改变自己的看法。首先，实用性目前来说确实不强，或者说应用范围很窄。但其实它可以提高自己的创意思维，css3的综合运用以及html代码的优化。当自己熟练使用的时候，会渐渐发现自己在重构那一块更加有想法和得心应手；其次，作为一个学生，在开发经验上略显不足，想分享一篇高质量的文章确实不易，所以我找准CSS3动画这个点，分享自己制作的一些好玩的demo，给大家带来一点点工作上或者生活上的乐趣，这就是我分享的初衷。当然，我也希望自己以后开发经验开始丰富的时候可以给大家分享更有价值的文章，这就等时间去沉淀吧！

OK，上面的效果是我依据一张自己在网上找的设计稿使用css3还原的，接下来就一个一个分享出来：

首先需要一个容器：

<div class="container">
</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 class="style_1">
<div class="camera_style_1">
<div class="header">
<div class="left"></div>
<div class="right">
<div class="whiteBlock"></div>
</div>
</div>
<div class="main">
<div class="round"></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 class="style_2">
<div class="camera_style_2">
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="main">
<div class="round"></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 class="style_3">
<div class="camera_style_3">
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></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 class="style_4">
<div class="camera_style_4">
<div class="header">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="main"></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 class="style_5">
<div class="camera_style_5">
<div class="header">
<div class="left"></div>
<div class="center">
<div class="center_innerLeft"></div>
<div class="center_innerRight">
<div class="center_innerRight_body"></div>
</div>
</div>
<div class="right"></div>
</div>
<div class="main">
<div class="main_bg"></div>
<div class="outterRound"></div>
<div class="innerRound"></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 class="style_6">
<div class="camera_style_6">
<div class="header">
<div class="top"></div>
</div>
<div class="main">
<div class="main_left"></div>
<div class="main_right"></div>
<div class="main_round"></div>
<div class="main_line"></div>
</div>
</div>
</div>

css代码：

.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;
}

第七款相机





html代码：

<div class="style_7">
<div class="camera_style_7">
<div class="main">
<div class="whiteBlock"></div>
<div class="round"></div>
</div>
</div>
</div>

css代码：

.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;
}

第八款相机





html代码：

<div class="style_8">
<div class="camera_style_8">
<div class="round"></div>
<div class="whiteBlock"></div>
</div>
</div>

css代码：

.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;
}

第九款相机





html代码：

<div class="style_9">
<div class="camera_style_9">
<div class="header">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="whiteBlock"></div>
</div>
</div>

css代码：

.camera_style_9{
width:120px;
height:70px;
background-color:#e17c10;
border-top:8px solid #016675;
border-bottom:6px solid #016675;
position: absolute;
top:50%;
left:50%;
margin-left:-60px;
margin-top:-41px;
}
.camera_style_9:before{
content:'';
display:block;
width:50px;
height:50px;
background-color:#026573;
border:6px solid #fff;
border-radius:50%;
position: absolute;
bottom:-4px;
left:29px;
}
.camera_style_9:after{
content:'';
display:block;
width:34px;
height:34px;
background-color:#3e3c38;
border-radius:50%;
position:absolute;
bottom:10px;
left:43px;
}
.camera_style_9 .whiteBlock{
width:60px;
height:10px;
border-left:20px solid #fff;
border-right:20px solid #fff;
position: absolute;
top:3px;
left:10px;
}
.camera_style_9 .whiteBlock:after{
content:'';
display:block;
width:9px;
height:9px;
border-radius:50%;
background-color:#fff;
position: absolute;
top:0.5px;
right:3px;
}
.camera_style_9 .header{
width:100%;
height:20px;
position: absolute;
top:-28px;
left:0;
}
.camera_style_9 .left{
width:0;
height:0;
border:10px solid transparent;
border-bottom:8px solid #00606f;
position: absolute;
bottom:0;
left:5px;
}
.camera_style_9 .left:before{
content:'';
display:block;
width:12px;
height:4px;
background-color:#e07c13;
position: absolute;
bottom:-5px;
left:-6px;
}
.camera_style_9 .left:after{
content:'';
display:block;
width:4px;
height:3px;
background-color:#016673;
position: absolute;
bottom:-1px;
left:-2px;
}
.camera_style_9 .center{
width:38px;
height:10px;
background-color:#fff;
border:7px solid #016675;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom:none;
position: absolute;
bottom:0;
left:34px;
}
.camera_style_9 .right{
width:16px;
height:4px;
background-color:#00606f;
position: absolute;
bottom:0;
right:5px;
}
.camera_style_9 .right:before{
content:'';
display:block;
width:16px;
height:4px;
background-color:#e17b12;
position:absolute;
bottom:4px;
right:0;
}
.camera_style_9 .right:after{
content:'';
display:block;
width:4px;
height:3px;
background-color:#006775;
position:absolute;
bottom:8px;
right:6px;
}

PS: 篇幅有点长，代码都提供了，有兴趣的可以尝试一下。

若需转载，请注明出处，谢谢！