Home > Article > Web Front-end > Nine retro camera special effects codes drawn with pure CSS3
Nine retro camera special effects codes drawn with pure CSS3
- 青灯夜游forward
- 2020-07-24 17:17:053368browse
This article will share with you nine retro camera special effects codes drawn purely with CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Let’s take a look at the renderings first:
PS:
Some people will say that these things are not very practical. What's the use? I thought so at first, but then I changed my mind. First of all, the practicality is indeed not strong at present, or the scope of application is very narrow. But in fact, it can improve your creative thinking, comprehensive application of css3 and optimization of html code.
When you become proficient in using it, you will gradually find that you are more thoughtful and handy in refactoring; secondly, as a student, I am slightly lacking in development experience and would like to share a high-quality article. It is indeed not easy, so I found the point of CSS3 animation and shared some fun demos I made to bring you a little fun in work or life. This is my original intention of sharing.
Of course, I also hope that I can share more valuable articles with you when I start to gain more development experience in the future. Let’s wait for time to settle!
OK, the above effect was restored using css3 based on a design draft I found online. Next, I will share it one by one:
First of all, I need to A container:
<div></div>
and some necessary css styles:
.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;
}
First camera
html code:
<div></div><div></div><div></div>
css code:
.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;
}
Second camera
html code:
<div></div> <div></div><div></div>
css code:
.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;
}
The third camera
html code:
<div></div> <div></div> <div></div><div></div>
css code:
.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;
}
The fourth camera
html code:
<div></div> <div></div> <div></div><div></div>
css code:
.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;
}
Fifth camera:
html code:
<div></div><div></div><div></div><div></div><div></div> <div></div> <div></div>
css code:
.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;
}
The sixth camera
html code:
<div></div><div></div> <div></div> <div></div> <div></div>
css code:
.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;
}
The seventh camera
html code:
<div></div> <div></div>
css code:
.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;
}
Eighth camera
css code:<div></div> <div></div>
.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
<div></div> <div></div> <div></div><div></div>
css code:
.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: The article is a bit long, but the code is provided. If you are interested, you can try it.
More cool CSS3, html5, javascript special effects codes, all in:
js special effects collectionThe above is the detailed content of Nine retro camera special effects codes drawn with pure CSS3. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：The difference between display:none and visibility:hiddenNext article：The difference between display:none and visibility:hidden