CSS - Cat on a Plane

Developer
Angela Velasquez
Size
2,774 Kb
Views
36,432
  1. CSS - Cat on a Plane Previews
  2. CSS - Cat on a Plane HTML Codes
  3. CSS - Cat on a Plane CSS Codes

How do I make an css - cat on a plane?

CSS illustration. What is a css - cat on a plane? How do you make a css - cat on a plane? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

CSS - Cat on a Plane Previews
IQ Test

CSS - Cat on a Plane - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS - Cat on a Plane</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="plane"> <div class="p-body"> <div class="p-parts"> <div class="part-one"> <span class="po-up"></span> <span class="po-middle"></span> <span class="po-down"></span> </div> <div class="part-two"> <span class="pt-wing"></span> </div> <div class="part-three"> <span class="roll"></span> </div> <div class="helix"> <span class="h-base"></span> <span class="h-rotor"></span> </div> </div> <div class="cat"> <span class="eyes left"></span> <span class="eyes right"></span> <span class="mouth"></span> </div> </div> <div class="p-message"> <div class="rope"></div> <ul> <li>Meow!</li> <li class="middle">Purr</li> <li>Meow</li> </ul> </div> </div>
</div>
</body>
</html>

CSS - Cat on a Plane - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Lato');
body,html { background:#ACF9E5; height:100%;
}
div, ul , li{ display: block; position: relative; margin: 0; padding: 0;
}
span, li{ font-family: 'Lato', sans-serif; }
.container{ position:absolute; margin: auto; width: 520px; height: 240px; top: 0; bottom: 0; left: 0; right: 0;
}
.container .plane{ position:absolute; margin: auto; width: 100%; height: 70%; top: 0; bottom: 0; left: 0; right: 0; animation:fly 1s infinite; -webkit-animation:fly 1s infinite;
}
.plane .p-body{ position:absolute; margin: auto; width: 50%; height: 100%; right: 0; overflow: visible;
}
.plane .p-body .p-parts{ position:absolute; margin: auto; width: 100%; height: 60%; bottom: 0; right: 0;
}
.p-parts .part-one, .p-parts .part-two, .p-parts .part-three{ float: left; width: 30%; background: #2E8F2D; height: 100%;
}
.p-parts .part-one { border-radius: 25% 0 0 85%; width: 35%;
}
.p-parts .part-one .po-up, .p-parts .part-one .po-middle , .p-parts .part-one .po-down,
.part-two .pt-wing { position: absolute; background: #247023; margin: auto; z-index: 0;
}
.p-parts .part-one .po-up { height: 30%; width: 55%; border-radius: 15% 95% 0 0; right: 20%; bottom: 100%;
}
.p-parts .part-one .po-middle { height: 10%; width: 60%; border-radius: 25%; left: 0%; bottom: 50%;
}
.p-parts .part-one .po-down { height: 15%; width: 20%; border-radius: 0 0 50% 50%; right: 10%; top: 100%; background: #444;
}
.p-parts .part-two { height: 60%; top: 41%; width: 25%;
}
.p-parts .part-two .pt-wing { height: 25%; width: 100%; border-radius: 0 0 70% 25%; bottom: 30%;
}
.p-parts .part-three { border-radius: 0 45% 45% 0; overflow: visible;
}
.p-parts .part-three .roll { display: block; position: absolute; height: 25px; width: 25px; border-radius: 50%; background: #444; z-index: 9; top: 102%;
}
.helix { position: absolute; margin: auto; height: 100%; width: 8%; right: 3%;
}
.helix .h-base{ display: block; position: absolute; border-radius: 0 50% 50% 0; background: #444; margin: auto; top: 40%; height: 25%; width: 100%; z-index: 2;
}
.helix .h-rotor{ display: block; border-radius: 50%; background: #333; margin: auto; height: 100%; width: 40%; z-index: 1; animation:h-fly 1s infinite; -webkit-animation:h-fly 1s infinite;
}
.cat { background:#BB8963; height: 30%; top: 35%; width: 16%; left: 40%; z-index: 1;
}
.cat:before{ width: 0; height: 0; border-left: 0px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #BB8963; top: -15px; left: 0; position: absolute; content: "";
}
.cat:after{ width: 0; height: 0; border-right: 0px solid transparent; border-left: 15px solid transparent; border-bottom: 15px solid #BB8963; top: -15px; right: 0; position: absolute; content: "";
}
.cat .eyes{ position: absolute; height: 6px; width: 6px; background: #FFF; border-radius: 100%; top: 12px;
}
.cat .eyes.left{ left: 6px; }
.cat .eyes.right{ right: 6px; }
.cat .mouth{ position: absolute; height: 8px; width: 8px; background: #DB4073; border-radius: 0 0 50% 50%; top: 20px; margin: auto; left: 0; right: 0;
}
.plane .p-message{ position:absolute; margin: auto; width: 50%; height: 100%; left: 0;
}
.plane .p-message .rope{ display: block; position:absolute; border: 1px solid #333; left: 90%; bottom: 50%; width: 10%;
}
.plane .p-message ul{ position:absolute; border-right: 8px solid #333; width: 92%; height: 25%; bottom: 35%;
}
.plane .p-message ul li{ float: right; height: 40px; background: #FFF; width: 33%; text-align: center; line-height: 2.85em; font-weight: 600; text-transform: uppercase; font-size: 0.75em; color: #777;
}
.plane .p-message ul li.middle{ top: 0px; background: #FAFAFA; animation:m-fly 1s infinite; -webkit-animation:m-fly 1s infinite;
}
@keyframes fly{
0 {top:0px;}
25% {top:10px;}
50% {top:0px;}
75% {top:10px;}
100% {top: 0%;}
}
@-webkit-keyframes fly /*Safari and Chrome*/ {
0 {top:0px;}
25% {top:10px;}
50% {top:0px;}
75% {top:10px;}
100% {top: 0%;}
}
@keyframes m-fly {
0 {top:0px;}
25% {top:5px;}
50% {top:0px;}
75% {top:5px;}
100% {top: 0%;}
}
@-webkit-keyframes m-fly /*Safari and Chrome*/ {
0 {top:0px;}
25% {top:5px;}
50% {top:0px;}
75% {top:5px;}
100% {top: 0%;}
}
@-webkit-keyframes h-fly /*Safari and Chrome*/ {
0 {height:100%; margin-top: 0; background: #333;}
10% {height:90%; margin-top: 8px; background: #111;}
20% {height:100%; margin-top: 0; background: #333;}
30% {height:90%; margin-top: 8px; background: #111;}
40% {height:100%; margin-top: 0; background: #333;}
50% {height:90%; margin-top: 8px; background: #111;}
60% {height:100%; margin-top: 0; background: #333;}
70% {height:90%; margin-top: 8px; background: #111;}
80% {height:100%; margin-top: 0; background: #333;}
90% {height:90%; margin-top: 8px; background: #111;}
100% {height:100%; margin-top: 0; background: #333;}
}
CSS - Cat on a Plane - Script Codes
CSS - Cat on a Plane - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 4
Size 2,774 Kb
Views 36,432
Do you need developer help for CSS - Cat on a Plane?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
Form with SVG radio buttons
CSS Fruit Background - Bananas
My First JavaScript Exercise
Pure css vertical menu
CSS - Cat on ride
CSS radio buttons
Snake
My Valentine
Layout Theme
Searchbox
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!