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

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

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: 篇幅有点长，代码都提供了，有兴趣的可以尝试一下。

最后编辑于：2017.11.27 05:54:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335

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

推荐阅读更多精彩内容