Pure CSS Rocket & Wink

Size
6,521 Kb
Views
62,744

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 Previews

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;
}
Pure CSS Rocket & Wink - Script Codes
Pure CSS Rocket & Wink - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded August 30, 2022
Rating 3.5
Size 6,521 Kb
Views 62,744
Do you need developer help for Pure CSS Rocket & Wink?

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!

Karsten Buckstegge (MrBambule) Script Codes
Create amazing web 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!