コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

青灯夜游
リリース： 2021-08-12 09:31:35
転載
3397 人が閲覧しました

この記事では、純粋に CSS3 で描画された 9 つのレトロ カメラ特殊効果コードを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

まずレンダリングを見てみましょう:

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

追記:

これらのことはあまり実用的ではないと言う人もいるでしょう。使用は何ですか？最初はそう思っていましたが、その後考えが変わりました。まず、現状では確かに実用性が弱いというか、適用範囲が非常に狭いです。しかし実際には、創造的思考、CSS3 の包括的な適用、HTML コードの最適化を向上させることができます。

使いこなせるようになると、徐々に自分がより思慮深く、リファクタリングが器用であることがわかります。次に、私は学生なので開発経験が少し不足しているため、高品質な開発を共有したいと考えています。確かに簡単ではないので、CSS3 アニメーションの要点を見つけて、仕事や生活にちょっとした楽しみをもたらすために作成した楽しいデモを共有しました。これが私の本来の共有の意図です。

もちろん、将来的に開発経験を積み始めた際には、より価値のある記事を皆さんと共有できればと思っています。時間が落ち着くまで待ちましょう!

OK, 上記の効果は、オンラインで見つけたデザインドラフトに基づいて css3 を使用して復元されました。次に、それを 1 つずつ共有します:

まず、コンテナ: 

<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;
}
ログイン後にコピー

最初のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

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;
}
ログイン後にコピー

2 番目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

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;
}
ログイン後にコピー

3 台目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

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;
}
ログイン後にコピー

4 台目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

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;
}
ログイン後にコピー

5 番目のカメラ:

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

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;
}
ログイン後にコピー

6 台目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

html コード: 


    

        

            <div></div>
        

        

            <div></div>
            <div></div>
            <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;
}
ログイン後にコピー

7 台目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

html コード: 


    

        

            <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;
}
ログイン後にコピー

8 台目のカメラ

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード

##html コード: 


    

        <div></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;
}
ログイン後にコピー

ninthcamera

純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コード##html コード: 


    

        

            <div></div>
            <div></div>
            <div></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;
}
ログイン後にコピー

追記: この記事は少し長いですが、コードは次のとおりです。興味があれば試してみてください。

さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています:

js 特殊効果コレクション

!

以上が純粋な CSS3 で描画された 9 つのレトロカメラ特殊効果コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 レトロなカメラ
ソース：cnblogs.com
前の記事：表示:なしと可視性:非表示の違い 次の記事：純粋な CSS で列幅の伸縮調整を実現する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート