純CSS3製做九款可愛復古相機

時間  2019-12-07
標籤 css3 css 製做 可愛 復古 相機 欄目 CSS 简体版
原文   原文鏈接

前言css

掐指一算，快兩個月沒寫博客分享了。好吧，我就只是在準備校招而已。如今已經有滿意的offer了，因此我就回來啦！這兩個月過得挺煎熬也挺充實的。具體細說估計得長篇大論，我就不閒扯了。總之呢，越努力，越幸運！html

正文css3

先看看製做出來的效果圖：web

360截圖20151031144018482

PS： 有人會說，這些東西實用性不強，沒啥用。一開始我也是這麼以爲，但後來我就改變本身的見解。首先，實用性目前來講確實不強，或者說應用範圍很窄。但其實它能夠提升本身的創意思惟，css3的綜合運用以及html代碼的優化。當本身熟練使用的時候，會漸漸發現本身在重構那一塊更加有想法和駕輕就熟；其次，做爲一個學生，在開發經驗上略顯不足，想分享一篇高質量的文章確實不易，因此我找準CSS3動畫這個點，分享本身製做的一些好玩的demo，給你們帶來一點點工做上或者生活上的樂趣，這就是我分享的初衷。固然，我也但願本身之後開發經驗開始豐富的時候能夠給你們分享更有價值的文章，這就等時間去沉澱吧！優化

OK，上面的效果是我依據一張本身在網上找的設計稿使用css3還原的，接下來就一個一個分享出來：動畫

首先須要一個容器：spa

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

第一款相機3d

360截圖20151031153026159

html代碼：code

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

第二款相機

360截圖20151031153131631

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

第三款相機

360截圖20151031153322334

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

第四款相機

360截圖20151031153331085

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

第五款相機：

360截圖20151031153338997

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

第六款相機

360截圖20151031153346341

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

第七款相機

360截圖20151031153356413

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

第八款相機

360截圖20151031153404445

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

第九款相機

360截圖20151031153411589

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: 篇幅有點長，代碼都提供了，有興趣的能夠嘗試一下。

 

若需轉載，請註明出處，謝謝！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程