The sky is the limit!
How do I make an the sky is the limit!?
An animated version of one of the rockets on this page: https://dribbble.com/shots/1793483-Rocket-Brand-Concepts-V2. What is a the sky is the limit!? How do you make a the sky is the limit!? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.
The sky is the limit! Previews
The sky is the limit! - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The sky is the limit!</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="scene"> <div class="spaceship"> <u></u> <i></i> <b></b> </div> <div class="smoke-trail"> <div class="smoke-0"></div> <div class="smoke-1"></div> <div class="smoke-2"></div> <div class="smoke-3"></div> <div class="smoke-4"></div> <div class="smoke-5"></div> <div class="smoke-6"></div> <div class="smoke-7"></div> <div class="smoke-8"></div> <div class="smoke-9"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>The sky is the limit! - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
body { background: #252122;
}
.scene { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset -10px -10px 0 #bebaba; -webkit-box-shadow: inset -10px -10px 0 #bebaba; box-shadow: inset -10px -10px 0 #bebaba; position: relative; background: #ffffff; margin: 50px auto; width: 160px; height: 160px;
}
.scene:before, .scene:after { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: " "; position: absolute; background: #bebaba;
}
.scene:before { top: 56px; left: 26px; width: 16px; height: 16px;
}
.scene:after { top: 10px; left: 66px; width: 26px; height: 26px;
}
.scene .spaceship { position: absolute; overflow: hidden; top: 18px; left: 58px; width: 86px; height: 86px;
}
.scene .spaceship:before { -moz-transform-origin: top center 0 50%; -ms-transform-origin: top center 0 50%; -webkit-transform-origin: top center 0 50%; transform-origin: top center 0 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content: " "; position: absolute; background: #252122; z-index: 0; top: 43px; left: 12px; width: 62px; height: 27px;
}
.scene .spaceship:after { -moz-transform-origin: top center 0 50%; -ms-transform-origin: top center 0 50%; -webkit-transform-origin: top center 0 50%; transform-origin: top center 0 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: 30px; -moz-border-radius-topright: 30px; -webkit-border-top-right-radius: 30px; border-top-right-radius: 30px; content: " "; position: absolute; background: #ffffff; z-index: 1; top: 48px; left: 10px; width: 55px; height: 20px;
}
.scene .spaceship u { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; background: #252122; border: solid 2px #ffffff; z-index: 10; top: 15px; right: 15px; width: 20px; height: 20px;
}
.scene .spaceship i { -moz-transform-origin: top right 0 50%; -ms-transform-origin: top right 0 50%; -webkit-transform-origin: top right 0 50%; transform-origin: top right 0 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; overflow: hidden; z-index: 2; top: 0; right: 0; width: 40px; height: 91px;
}
.scene .spaceship i:before { -moz-border-radius-topleft: 100% 50%; -webkit-border-top-left-radius: 100% 50%; border-top-left-radius: 100% 50%; -moz-border-radius-bottomleft: 100% 50%; -webkit-border-bottom-left-radius: 100% 50%; border-bottom-left-radius: 100% 50%; content: " "; position: absolute; background: #ffffff; top: 0; right: -5px; width: 26px; height: 100%;
}
.scene .spaceship i:after { content: " "; position: absolute; z-index: -1; top: 44px; left: 11px; width: 0; height: 0; border-style: solid; border-color: transparent #252122 transparent transparent; border-width: 18px 10px 0 0;
}
.scene .spaceship b { -moz-transform-origin: top left 0 50%; -ms-transform-origin: top left 0 50%; -webkit-transform-origin: top left 0 50%; transform-origin: top left 0 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; overflow: hidden; z-index: 3; top: 0; left: 100%; width: 40px; height: 91px;
}
.scene .spaceship b:before { -moz-border-radius-topright: 100% 50%; -webkit-border-top-right-radius: 100% 50%; border-top-right-radius: 100% 50%; -moz-border-radius-bottomright: 100% 50%; -webkit-border-bottom-right-radius: 100% 50%; border-bottom-right-radius: 100% 50%; content: " "; position: absolute; background: #252122; top: 0; left: -5px; width: 26px; height: 100%;
}
.scene .spaceship b:after { content: " "; position: absolute; top: 44px; right: 11px; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #252122; border-width: 18px 0 0 10px;
}
.scene .smoke-trail { -moz-transform-origin: top center 0 50%; -ms-transform-origin: top center 0 50%; -webkit-transform-origin: top center 0 50%; transform-origin: top center 0 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; background: #252122; top: 80px; left: 77px; width: 10px; height: 38px;
}
.scene .smoke-trail:before { -moz-animation: flame-animation 0.2s linear infinite; -webkit-animation: flame-animation 0.2s linear infinite; animation: flame-animation 0.2s linear infinite; content: " "; position: absolute; top: 0; left: -1px; width: 0; height: 0; border-style: solid; border-color: #ffffff transparent transparent transparent; border-width: 16px 6px 0 6px;
}
.scene .smoke-trail:after { content: " "; position: absolute; top: 0; left: 1px; width: 0; height: 0; border-style: solid; border-color: #252122 transparent transparent transparent; border-width: 12px 4px 0 4px;
}
.scene .smoke-trail > div { -moz-animation: smoke-animation 0.3s linear infinite alternate-reverse; -webkit-animation: smoke-animation 0.3s linear infinite alternate-reverse; animation: smoke-animation 0.3s linear infinite alternate-reverse; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; background: #252122;
}
.scene .smoke-trail .smoke-0 { -moz-animation: none; -webkit-animation: none; animation: none; top: 35px; left: -45px; width: 100px; height: 100px;
}
.scene .smoke-trail .smoke-1 { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; top: 32px; left: 2px; width: 22px; height: 22px;
}
.scene .smoke-trail .smoke-2 { -moz-animation-delay: 0.26s; -webkit-animation-delay: 0.26s; animation-delay: 0.26s; top: 37px; left: 8px; width: 42px; height: 42px;
}
.scene .smoke-trail .smoke-3 { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; top: 45px; left: 31px; width: 42px; height: 42px;
}
.scene .smoke-trail .smoke-4 { -moz-animation-delay: 0.19s; -webkit-animation-delay: 0.19s; animation-delay: 0.19s; top: 32px; right: 2px; width: 22px; height: 22px;
}
.scene .smoke-trail .smoke-5 { -moz-animation-delay: 0.03s; -webkit-animation-delay: 0.03s; animation-delay: 0.03s; top: 37px; right: 8px; width: 42px; height: 42px;
}
.scene .smoke-trail .smoke-6 { -moz-animation-delay: 0.18s; -webkit-animation-delay: 0.18s; animation-delay: 0.18s; top: 45px; right: 31px; width: 42px; height: 42px;
}
.scene .smoke-trail .smoke-7 { -moz-animation-delay: 0.18s; -webkit-animation-delay: 0.18s; animation-delay: 0.18s; top: 55px; right: 11px; width: 26px; height: 26px; border-top: solid 4px #ffffff;
}
.scene .smoke-trail .smoke-8 { -moz-animation-delay: 0.13s; -webkit-animation-delay: 0.13s; animation-delay: 0.13s; top: 46px; left: 20px; width: 22px; height: 22px; border-top: solid 4px #ffffff;
}
.scene .smoke-trail .smoke-9 { -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; top: 55px; left: 31px; width: 26px; height: 26px; border-top: solid 4px #ffffff;
}
@-moz-keyframes flame-animation { 100% { border-top-width: 18px; }
}
@-webkit-keyframes flame-animation { 100% { border-top-width: 18px; }
}
@keyframes flame-animation { 100% { border-top-width: 18px; }
}
@-moz-keyframes smoke-animation { 0% { -moz-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); } 100% { -moz-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes smoke-animation { 0% { -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes smoke-animation { 0% { -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); } 100% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
The sky is the limit! - Script Codes JS Codes
/*
The sky is the limit!
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
Inspired by: https://dribbble.com/shots/1793483-Rocket-Brand-Concepts-V2
*/
| Developer | Kevin Jannis |
| Username | kevinjannis |
| Uploaded | August 25, 2022 |
| Rating | 4.5 |
| Size | 4,243 Kb |
| Views | 30,360 |
Do you need developer help for The sky is the limit!?
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!
Kevin Jannis (kevinjannis) Script Codes
| Name | Size |
| Vivid CSS3 Spinner | 3,181 Kb |
| Simple float label | 3,312 Kb |
| Curated collection of gradient backgrounds | 3,067 Kb |
| V for Vendetta | 7,249 Kb |
| A winter wonderland scene | 5,581 Kb |
| Flat Star Wars | 37,947 Kb |
| Google Chrome logos in CSS | 2,391 Kb |
| A Pen by Kevin Jannis | 3,280 Kb |
| Golfing | 3,530 Kb |
| White House | 3,988 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| This in constructor context | _shree33 | 1,718 Kb |
| Whyutils | LeYvan | 3,752 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
| Caputre Cam with JS | KimmoCommit | 2,795 Kb |
| SVG Circle Progress | JMChristensen | 3,368 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| Text Looping Transition | Agelber | 5,619 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
Do you want hide your ip address?
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!