Heim >Web-Frontend >CSS-Tutorial >Neun Retro-Kamera-Spezialeffektcodes, gezeichnet mit reinem CSS3
Neun Retro-Kamera-Spezialeffektcodes, gezeichnet mit reinem CSS3
- 青灯夜游nach vorne
- 2020-07-24 17:17:053404Durchsuche
In diesem Artikel werden neun Codes für Retro-Kamera-Spezialeffekte vorgestellt, die ausschließlich mit CSS3 erstellt wurden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Werfen wir zunächst einen Blick auf die Darstellungen:
PS:
Manche Leute werden sagen, dass diese Dinge nicht sehr praktisch sind. Was ist der Nutzen? Das dachte ich zuerst, aber dann änderte ich meine Meinung. Erstens ist die Praktikabilität derzeit tatsächlich nicht sehr gut bzw. der Anwendungsbereich ist sehr eng. Tatsächlich kann es jedoch Ihr kreatives Denken, die umfassende Anwendung von CSS3 und die Optimierung von HTML-Code verbessern.
Wenn Sie es beherrschen, werden Sie nach und nach feststellen, dass Sie beim Refactoring umsichtiger und geschickter sind. Zweitens mangelt es mir als Student etwas an Entwicklungserfahrung, und ich möchte ein Hoch mitteilen -Qualitätsartikel Es ist in der Tat nicht einfach, deshalb habe ich den Sinn der CSS3-Animation gefunden und einige lustige Demos geteilt, die ich gemacht habe, um Ihnen ein wenig Spaß bei der Arbeit oder im Leben zu bringen. Dies ist meine ursprüngliche Absicht, sie zu teilen.
Natürlich hoffe ich auch, dass ich, wenn ich in Zukunft mehr Entwicklungserfahrung sammele, weitere wertvolle Artikel mit Ihnen teilen kann. Warten wir, bis sich die Zeit gelegt hat!
Okay, der obige Effekt wurde mithilfe von CSS3 basierend auf einem Designentwurf, den ich online gefunden habe, wiederhergestellt. Als nächstes werde ich ihn einzeln teilen:
Das Erste ist nötig Ein Container:
<div></div>
und einige notwendige CSS-Stile:
.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;
}
Zweite Kamera
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;
}
Dritte Kamera
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;
}
Die vierte Kamera
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;
}
Fünfte Kamera:
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;
}
Die sechste Kamera
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;
}
Siebte Kamera
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;
}
Die achte Kamera
HTML-Code:
<div></div> <div></div>
CSS-Code:
.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;
}
Die neunte Kamera
HTML-Code:
<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: Der Artikel ist etwas lang, aber der Code schon Wenn Sie Interesse haben, können Sie es ausprobieren.
Weitere coole CSS3-, HTML5- und Javascript-Spezialeffektcodes sind verfügbar in: JS-Spezialeffektsammlung!
Das obige ist der detaillierte Inhalt vonNeun Retro-Kamera-Spezialeffektcodes, gezeichnet mit reinem CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Der Unterschied zwischen display:none und Visibility:hiddenNächster Artikel：Der Unterschied zwischen display:none und Visibility:hidden