Pure CSS Rocket & Wink
How do I make an pure css rocket & wink?
Inspired by the german agency "Rocket & Wink" (Wink ~ to wave) pure CSS rocket with a little animation.. What is a pure css rocket & wink? How do you make a pure css rocket & wink? This script and codes were developed by Karsten Buckstegge on 30 August 2022, Tuesday.
Pure CSS Rocket & Wink - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Rocket & Wink</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #rocket { position: absolute; top: 20px; left: 350px; width: 140px; height: 330px;
}
@keyframes fly { 0% { transform: rotate(1deg); } 1% { transform: rotate(-1deg); } 2% { transform: rotate(1deg); } 3% { transform: rotate(-1deg); } 4% { transform: rotate(1deg); } 5% { transform: rotate(-1deg); } 6% { transform: rotate(2deg); } 7% { transform: rotate(-2deg); } 8% { transform: rotate(2deg); } 9% { transform: rotate(-2deg); } 10% { transform: rotate(2deg); } 11% { transform: rotate(-2deg); } 12% { transform: rotate(2deg); } 13% { transform: rotate(-2deg); } 14% { transform: rotate(2deg); } 15% { transform: rotate(-2deg); } 16% { transform: rotate(2deg); } 17% { transform: rotate(-2deg); } 18% { transform: rotate(2deg); } 19% { transform: rotate(-2deg); } 20% { transform: rotate(2deg); } 21% { transform: rotate(-2deg); } 22% { transform: rotate(2deg); } 23% { transform: rotate(-2deg); } 24% { transform: rotate(2deg); } 25% { transform: rotate(-2deg); } 26% { transform: rotate(2deg); } 27% { transform: rotate(-2deg); } 28% { transform: rotate(2deg); } 29% { transform: rotate(-2deg); } 30% { transform: rotate(2deg); } 31% { transform: rotate(-2deg); } 32% { transform: rotate(2deg); } 33% { transform: rotate(-2deg); } 34% { transform: rotate(2deg); } 35% { transform: rotate(-2deg); } 36% { transform: rotate(2deg); } 37% { transform: rotate(-2deg); } 38% { transform: rotate(2deg); } 39% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 41% { transform: rotate(-2deg); } 42% { transform: rotate(2deg); } 43% { transform: rotate(-2deg); } 44% { transform: rotate(2deg); } 45% { transform: rotate(-2deg); } 46% { transform: rotate(2deg); } 47% { transform: rotate(-2deg); } 48% { transform: rotate(2deg); } 49% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 51% { transform: rotate(-2deg); } 52% { transform: rotate(2deg); } 53% { transform: rotate(-2deg); } 54% { transform: rotate(2deg); } 55% { transform: rotate(-2deg); } 56% { transform: rotate(2deg); } 57% { transform: rotate(-2deg); } 58% { transform: rotate(2deg); } 59% { transform: rotate(-2deg); } 60% { transform: rotate(2deg); } 61% { transform: rotate(-2deg); } 62% { transform: rotate(2deg); } 63% { transform: rotate(-2deg); } 64% { transform: rotate(2deg); } 65% { transform: rotate(-2deg); } 66% { transform: rotate(2deg); } 67% { transform: rotate(-2deg); } 68% { transform: rotate(2deg); } 69% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); top: -400px; left: 370px; }
}
#rocket:hover { animation: fly 8s ease-out;
}
.rocket__body__part { height: 30px; width: 69px; background: #424647; position: absolute; left: 50px; top: 210px; z-index: 1000; border-bottom: 2px solid black; border-top: 2px solid black; box-shadow: -12px 0px 38px -5px rgba(0, 0, 0, 0.4) inset;
}
.rocket__body { height: 250px; width: 50px; left: 50px; top: 50px; background: #CAD8E0; position: absolute; z-index: 100; border-radius: 99% 40% 0% 20%;
}
.rocket__body:after { content: ""; height: 250px; width: 50px; left: 19px; background: #CAD8E0; position: absolute; z-index: 100; border-radius: 40% 99% 20% 0%; box-shadow: -12px 10px 18px -5px rgba(0, 0, 0, 0.3) inset;
}
.rocket__body:before { content: ""; height: 0px; width: 0px; position: absolute; z-index: 1; left: 32px; bottom: 248px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 60px solid #424647;
}
.rocket__wings:before,
.rocket__wings--back:before { content: ""; height: 20px; width: 0px; position: absolute; left: 20px; top: 220px; z-index: 10; border-right: 32px solid #E2E291; border-top: 57px solid white; transform: skewY(-20deg);
}
.rocket__wings:after,
.rocket__wings--back:after { content: ""; height: 20px; width: 0px; position: absolute; left: 115px; top: 220px; z-index: 10; border-left: 32px solid #E2E291; border-top: 57px solid white; transform: skewY(20deg);
}
.rocket__wings--back:before { height: 27px; border-right: 37px solid #9B9832;
}
.rocket__wings--back:after { height: 27px; left: 110px; border-left: 37px solid #9B9832;
}
.rocket__face { width: 12px; height: 10px; position: absolute; left: 75px; top: 150px; z-index: 110; border: 2px solid #424647; border-top: 0; background: transparent; border-radius: 0px 0px 90px 90px;
}
.rocket__face:before,
.rocket__face:after { content: ""; width: 7px; height: 7px; background: #424647; position: absolute; z-index: 100; left: -10px; bottom: 14px; border: 1px solid white; border-radius: 50%;
}
.rocket__face:after { left: 15px;
}
.rocket__fire,
.rocket__fire2 { width: 25px; height: 25px; position: absolute; border: 0 solid transparent; border-right: 15px solid red; border-radius: 0px 0 20px 0px; left: 65px; top: 300px; z-index: 6;
}
.rocket__fire:before,
.rocket__fire2:before { content: ""; width: 12px; height: 22px; position: absolute; border: 0 solid transparent; border-left: 6px solid red; border-radius: 0px 0px 0px 20px; right: -8px; transform: rotate(12deg); z-index: 5;
}
.rocket__fire:after,
.rocket__fire2:after { content: ""; width: 12px; height: 32px; position: absolute; border: 0 solid transparent; border-left: 10px solid orange; border-radius: 0px 0px 0px 20px; transform: rotate(12deg); right: 15px; z-index: 1;
}
.rocket__fire2 { transform: scaleX(-1); left: 60px;
}
.rocket__fire2:before { left: 15px;
}
.rocket__arms { width: 150px; height: 150px; border-radius: 50%; position: absolute; left: 13px; top: 60px; box-shadow: -12px 0px 8px -5px rgba(0, 0, 0, 0.3) inset; background: linear-gradient(45deg, #E2E291, #E2E291 12%, #E03B2C 12%, #E03B2C 25%, #E2E291 25%, #E2E291 37%, #E03B2C 37%, #E03B2C 50%, #E2E291 50%, #E2E291 62%, #E03B2C 62%, #E03B2C 75%, #E2E291 75%, #E2E291 87%, #E03B2C 87%, #E03B2C 100%);
}
.rocket__arms:after { content: ""; width: 110px; height: 110px; background: white; border-radius: 50%; position: absolute; left: 20px; top: 20px; box-shadow: -7px 10px 8px -5px rgba(0, 0, 0, 0.2);
}
.rocket__arms:before { content: ""; width: 150px; height: 60px; background: white; position: absolute;
}
@keyframes wink { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); }
}
.rocket__hand { width: 35px; height: 35px; background: #CAD8E0; position: absolute; border-radius: 50%; left: 135px; top: 95px; animation: wink 0.5s infinite;
}
.thumb { width: 12px; height: 12px; background: #CAD8E0; position: absolute; border-radius: 50%; top: 15px; left: -6px;
}
.finger { width: 10px; height: 20px; background: #CAD8E0; position: absolute; border-radius: 50%; top: -7px;
}
.finger1 { transform: rotate(-10deg);
}
.finger2 { top: -10px; left: 13px;
}
.finger3 { left: 26px; transform: rotate(10deg);
}
.hand--left { left: 5px; animation-delay: 0.25s;
}
.hand--left .thumb { left: 28px;
}
.greetings { font-family: 'Ubuntu Mono'; color: #E2E291; text-shadow: -1px 1px 1px #424647; position: absolute; padding: 50px; padding-bottom: 30px; left: 700px; top: -20px; background: #E03B2C; border-radius: 20px; border: 6px solid #E2E291;
}
h1 { font-weight: 700; text-transform: uppercase;
}
p { font-weight: 400; font-style: italic; margin-bottom: -10px;
}
hr { margin-top: 370px; border: 1px solid #CAD8E0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8" /> <title>Rocket & Wink???</title> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:700,400italic' rel='stylesheet' type='text/css'>
</head>
<body> <div id="rocket"> <div class="rocket__face"></div> <div class="rocket__body__part"></div> <div class="rocket__body"></div> <div class="rocket__wings--back"></div> <div class="rocket__wings"></div> <div class="rocket__fire"></div> <div class="rocket__fire2"></div> <div class="rocket__arms"></div> <div class="rocket__hand hand--right"> <div class="thumb"></div> <div class="finger finger1"></div> <div class="finger finger2"></div> <div class="finger finger3"></div> </div> <div class="rocket__hand hand--left"> <div class="thumb"></div> <div class="finger finger1"></div> <div class="finger finger2"></div> <div class="finger finger3"></div> </div> </div> <div class="greetings"> <h1>Rocket & Wink ??</h1> <p>Was ist hier den los?</p> <p>@Mr_Bambule</p> </div> <hr />
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS Rocket & Wink - Script Codes CSS Codes
#rocket { position: absolute; top: 20px; left: 350px; width: 140px; height: 330px;
}
@keyframes fly { 0% { transform: rotate(1deg); } 1% { transform: rotate(-1deg); } 2% { transform: rotate(1deg); } 3% { transform: rotate(-1deg); } 4% { transform: rotate(1deg); } 5% { transform: rotate(-1deg); } 6% { transform: rotate(2deg); } 7% { transform: rotate(-2deg); } 8% { transform: rotate(2deg); } 9% { transform: rotate(-2deg); } 10% { transform: rotate(2deg); } 11% { transform: rotate(-2deg); } 12% { transform: rotate(2deg); } 13% { transform: rotate(-2deg); } 14% { transform: rotate(2deg); } 15% { transform: rotate(-2deg); } 16% { transform: rotate(2deg); } 17% { transform: rotate(-2deg); } 18% { transform: rotate(2deg); } 19% { transform: rotate(-2deg); } 20% { transform: rotate(2deg); } 21% { transform: rotate(-2deg); } 22% { transform: rotate(2deg); } 23% { transform: rotate(-2deg); } 24% { transform: rotate(2deg); } 25% { transform: rotate(-2deg); } 26% { transform: rotate(2deg); } 27% { transform: rotate(-2deg); } 28% { transform: rotate(2deg); } 29% { transform: rotate(-2deg); } 30% { transform: rotate(2deg); } 31% { transform: rotate(-2deg); } 32% { transform: rotate(2deg); } 33% { transform: rotate(-2deg); } 34% { transform: rotate(2deg); } 35% { transform: rotate(-2deg); } 36% { transform: rotate(2deg); } 37% { transform: rotate(-2deg); } 38% { transform: rotate(2deg); } 39% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 41% { transform: rotate(-2deg); } 42% { transform: rotate(2deg); } 43% { transform: rotate(-2deg); } 44% { transform: rotate(2deg); } 45% { transform: rotate(-2deg); } 46% { transform: rotate(2deg); } 47% { transform: rotate(-2deg); } 48% { transform: rotate(2deg); } 49% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 51% { transform: rotate(-2deg); } 52% { transform: rotate(2deg); } 53% { transform: rotate(-2deg); } 54% { transform: rotate(2deg); } 55% { transform: rotate(-2deg); } 56% { transform: rotate(2deg); } 57% { transform: rotate(-2deg); } 58% { transform: rotate(2deg); } 59% { transform: rotate(-2deg); } 60% { transform: rotate(2deg); } 61% { transform: rotate(-2deg); } 62% { transform: rotate(2deg); } 63% { transform: rotate(-2deg); } 64% { transform: rotate(2deg); } 65% { transform: rotate(-2deg); } 66% { transform: rotate(2deg); } 67% { transform: rotate(-2deg); } 68% { transform: rotate(2deg); } 69% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); top: -400px; left: 370px; }
}
#rocket:hover { animation: fly 8s ease-out;
}
.rocket__body__part { height: 30px; width: 69px; background: #424647; position: absolute; left: 50px; top: 210px; z-index: 1000; border-bottom: 2px solid black; border-top: 2px solid black; box-shadow: -12px 0px 38px -5px rgba(0, 0, 0, 0.4) inset;
}
.rocket__body { height: 250px; width: 50px; left: 50px; top: 50px; background: #CAD8E0; position: absolute; z-index: 100; border-radius: 99% 40% 0% 20%;
}
.rocket__body:after { content: ""; height: 250px; width: 50px; left: 19px; background: #CAD8E0; position: absolute; z-index: 100; border-radius: 40% 99% 20% 0%; box-shadow: -12px 10px 18px -5px rgba(0, 0, 0, 0.3) inset;
}
.rocket__body:before { content: ""; height: 0px; width: 0px; position: absolute; z-index: 1; left: 32px; bottom: 248px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 60px solid #424647;
}
.rocket__wings:before,
.rocket__wings--back:before { content: ""; height: 20px; width: 0px; position: absolute; left: 20px; top: 220px; z-index: 10; border-right: 32px solid #E2E291; border-top: 57px solid white; transform: skewY(-20deg);
}
.rocket__wings:after,
.rocket__wings--back:after { content: ""; height: 20px; width: 0px; position: absolute; left: 115px; top: 220px; z-index: 10; border-left: 32px solid #E2E291; border-top: 57px solid white; transform: skewY(20deg);
}
.rocket__wings--back:before { height: 27px; border-right: 37px solid #9B9832;
}
.rocket__wings--back:after { height: 27px; left: 110px; border-left: 37px solid #9B9832;
}
.rocket__face { width: 12px; height: 10px; position: absolute; left: 75px; top: 150px; z-index: 110; border: 2px solid #424647; border-top: 0; background: transparent; border-radius: 0px 0px 90px 90px;
}
.rocket__face:before,
.rocket__face:after { content: ""; width: 7px; height: 7px; background: #424647; position: absolute; z-index: 100; left: -10px; bottom: 14px; border: 1px solid white; border-radius: 50%;
}
.rocket__face:after { left: 15px;
}
.rocket__fire,
.rocket__fire2 { width: 25px; height: 25px; position: absolute; border: 0 solid transparent; border-right: 15px solid red; border-radius: 0px 0 20px 0px; left: 65px; top: 300px; z-index: 6;
}
.rocket__fire:before,
.rocket__fire2:before { content: ""; width: 12px; height: 22px; position: absolute; border: 0 solid transparent; border-left: 6px solid red; border-radius: 0px 0px 0px 20px; right: -8px; transform: rotate(12deg); z-index: 5;
}
.rocket__fire:after,
.rocket__fire2:after { content: ""; width: 12px; height: 32px; position: absolute; border: 0 solid transparent; border-left: 10px solid orange; border-radius: 0px 0px 0px 20px; transform: rotate(12deg); right: 15px; z-index: 1;
}
.rocket__fire2 { transform: scaleX(-1); left: 60px;
}
.rocket__fire2:before { left: 15px;
}
.rocket__arms { width: 150px; height: 150px; border-radius: 50%; position: absolute; left: 13px; top: 60px; box-shadow: -12px 0px 8px -5px rgba(0, 0, 0, 0.3) inset; background: linear-gradient(45deg, #E2E291, #E2E291 12%, #E03B2C 12%, #E03B2C 25%, #E2E291 25%, #E2E291 37%, #E03B2C 37%, #E03B2C 50%, #E2E291 50%, #E2E291 62%, #E03B2C 62%, #E03B2C 75%, #E2E291 75%, #E2E291 87%, #E03B2C 87%, #E03B2C 100%);
}
.rocket__arms:after { content: ""; width: 110px; height: 110px; background: white; border-radius: 50%; position: absolute; left: 20px; top: 20px; box-shadow: -7px 10px 8px -5px rgba(0, 0, 0, 0.2);
}
.rocket__arms:before { content: ""; width: 150px; height: 60px; background: white; position: absolute;
}
@keyframes wink { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); }
}
.rocket__hand { width: 35px; height: 35px; background: #CAD8E0; position: absolute; border-radius: 50%; left: 135px; top: 95px; animation: wink 0.5s infinite;
}
.thumb { width: 12px; height: 12px; background: #CAD8E0; position: absolute; border-radius: 50%; top: 15px; left: -6px;
}
.finger { width: 10px; height: 20px; background: #CAD8E0; position: absolute; border-radius: 50%; top: -7px;
}
.finger1 { transform: rotate(-10deg);
}
.finger2 { top: -10px; left: 13px;
}
.finger3 { left: 26px; transform: rotate(10deg);
}
.hand--left { left: 5px; animation-delay: 0.25s;
}
.hand--left .thumb { left: 28px;
}
.greetings { font-family: 'Ubuntu Mono'; color: #E2E291; text-shadow: -1px 1px 1px #424647; position: absolute; padding: 50px; padding-bottom: 30px; left: 700px; top: -20px; background: #E03B2C; border-radius: 20px; border: 6px solid #E2E291;
}
h1 { font-weight: 700; text-transform: uppercase;
}
p { font-weight: 400; font-style: italic; margin-bottom: -10px;
}
hr { margin-top: 370px; border: 1px solid #CAD8E0;
}
Developer | Karsten Buckstegge |
Username | MrBambule |
Uploaded | August 30, 2022 |
Rating | 3.5 |
Size | 6,521 Kb |
Views | 62,744 |
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 |
The wheel of social | 4,072 Kb |
Responsive focuspoint on image with object-position | 3,707 Kb |
Responsive CSS arrow bar with transparent borders | 2,798 Kb |
Freddy the Fly | 4,238 Kb |
CSS3 Hover Button | 3,717 Kb |
SeXy buttons | 4,447 Kb |
Sliding Skill-Diagramm | 2,466 Kb |
Dropdown Menu Animation | 3,411 Kb |
A Pen by Karsten Buckstegge | 3,521 Kb |
Scalable animated css menu button | 2,632 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 |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Animated css matrix type | NielsOeltjen | 3,484 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 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!