Flying pinata
How do I make an flying pinata?
Animation for http://flyingpinata.co/. What is a flying pinata? How do you make a flying pinata? This script and codes were developed by Susanne Karin Lundblad on 13 September 2022, Tuesday.
Flying pinata - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flying pinata</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap"> <div class="pinata-wrap"> <div class="propeller-wrap propeller-wrap--first"> <div class="propeller propeller--first"> <div class="propeller-blade"></div> </div> <div class="propeller propeller--second"> <div class="propeller-blade"></div> </div> </div> <div class="propeller-wrap propeller-wrap--second"> <div class="propeller propeller--first"> <div class="propeller-blade"></div> </div> <div class="propeller propeller--second"> <div class="propeller-blade"></div> </div> </div><img class="rope" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43234/rope-02.svg"/> <div class="pinata"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43234/body.svg"/><img class="pinata-rope" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43234/rope2.svg"/></div> </div> <div class="ground"></div>
</div>
</body>
</html>
Flying pinata - Script Codes CSS Codes
body,
html,
.wrap { width: 100%; height: 100%; overflow: hidden;
}
.wrap { background-color: #dbf1ff; padding-top: 100px;
}
.pinata-wrap { display: block; margin: auto; padding-top: 109px; padding-left: 99px; width: 320px; position: relative; -webkit-animation: wrap 5s infinite ease-in-out; animation: wrap 5s infinite ease-in-out;
}
.propeller-wrap { position: absolute; top: 0; width: 172px; height: 12px; border-radius: 4px; margin-top: 13px;
}
.propeller-wrap:before,
.propeller-wrap:after { content: ""; position: absolute;
}
.propeller-wrap:before { bottom: -8px; width: 37px; height: 28px; border-radius: 19px;
}
.propeller-wrap:after { width: 16px; height: 8px; top: -12px; border-radius: 5px;
}
.propeller-wrap--first { background-color: #2e9d6d; left: 12px;
}
.propeller-wrap--first:before,
.propeller-wrap--first:after { background-color: #2e9d6d;
}
.propeller-wrap--first:before { left: 72px;
}
.propeller-wrap--first:after { left: 82px;
}
.propeller-wrap--second { background-color: #27c787; left: 40px;
}
.propeller-wrap--second:before,
.propeller-wrap--second:after { background-color: #27c787;
}
.propeller-wrap--second:before { left: 51px;
}
.propeller-wrap--second:after { left: 61px;
}
.propeller { position: absolute; bottom: 100%; margin-bottom: 5px; width: 52px; height: 6px;
}
.propeller:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -2px; width: 4px; height: 5px;
}
.propeller-wrap--first .propeller:before { background-color: #2e9d6d;
}
.propeller-wrap--second .propeller:before { background-color: #27c787;
}
.propeller-blade { border-radius: 3.5px; -webkit-animation: propellers 0.25s infinite linear; animation: propellers 0.25s infinite linear; width: 100%; height: 100%;
}
.propeller-wrap--first .propeller-blade { background-color: #2e9d6d;
}
.propeller-wrap--second .propeller-blade { background-color: #27c787;
}
.propeller--first { left: -12px;
}
.propeller--second { left: 126px;
}
.rope { position: absolute; width: 110px; top: 19px; left: 101px; z-index: 1; -webkit-animation: rope 5s infinite ease-in-out; animation: rope 5s infinite ease-in-out; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(11deg); transform: rotate(11deg);
}
.pinata { width: 222px; position: relative; z-index: 2; -webkit-animation: pinata 5s infinite ease-in-out; animation: pinata 5s infinite ease-in-out; -webkit-transform: rotate(5deg) translate3d(-60px, 0, 100px); transform: rotate(5deg) translate3d(-60px, 0, 100px);
}
.pinata-rope { position: absolute; top: 86px; left: 87px; width: 38px;
}
.ground { position: absolute; left: -300px; right: -300px; bottom: -100px; height: 200px; background-color: #27c787; border-radius: 50%;
}
@-webkit-keyframes wrap { 50% { -webkit-transform: translateY(10px); transform: translateY(10px); }
}
@keyframes wrap { 50% { -webkit-transform: translateY(10px); transform: translateY(10px); }
}
@-webkit-keyframes propellers { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@keyframes propellers { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@-webkit-keyframes rope { 50% { -webkit-transform: rotate(-6.2deg); transform: rotate(-6.2deg); }
}
@keyframes rope { 50% { -webkit-transform: rotate(-6.2deg); transform: rotate(-6.2deg); }
}
@-webkit-keyframes pinata { 50% { -webkit-transform: rotate(-5deg) translate3d(20px, -5px, 100px); transform: rotate(-5deg) translate3d(20px, -5px, 100px); }
}
@keyframes pinata { 50% { -webkit-transform: rotate(-5deg) translate3d(20px, -5px, 100px); transform: rotate(-5deg) translate3d(20px, -5px, 100px); }
}
Developer | Susanne Karin Lundblad |
Username | SusanneLundblad |
Uploaded | September 13, 2022 |
Rating | 4 |
Size | 3,560 Kb |
Views | 30,360 |
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!
Name | Size |
AngularJS, showing and hiding content using radio buttons | 2,032 Kb |
Wake animation | 4,322 Kb |
Floating element with shadow | 1,783 Kb |
Getting username from email adress | 3,443 Kb |
AngularJS, submitting from input pushing enter | 2,219 Kb |
A Pen by Susanne Karin Lundblad | 2,320 Kb |
Loading animation | 2,383 Kb |
Fullscreen portfolio startpage | 3,041 Kb |
Cat button | 2,478 Kb |
Css-ninja | 3,392 Kb |
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!
Name | Username | Size |
Angular Route | Arun_v606 | 1,837 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Awesome | Samarthpd | 2,901 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!