Css3 - Rocket
How do I make an css3 - rocket?
What is a css3 - rocket? How do you make a css3 - rocket? This script and codes were developed by Kévin Boudot on 17 October 2022, Monday.
Css3 - Rocket Previews
Css3 - Rocket - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css3 - Rocket</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rocket"> <span> <i class="fin-top"></i> <i class="fin-bottom"></i> <i class="faya"></i> <i class="wastes"><i></i><i></i><i></i><i></i><i></i></i> </span>
</div>
</body>
</html>
Css3 - Rocket - Script Codes CSS Codes
body{ background-color: #11141b;
}
.rocket{ position: absolute; left: calc(50% - 40px); top: calc(50% - 18px);
}
.rocket span{ display: block; width: 65px; height: 20px; background-color: #d11c40; position: absolute; border-bottom-right-radius: 100%; border-top-right-radius: 100%; border-left: 3px solid #5b595d; border-right: 3px solid #D11C40; -webkit-animation: wiggling 300ms infinite; -moz-animation: wiggling 300ms infinite; -o-animation: wiggling 300ms infinite; -ms-animation: wiggling 300ms infinite; animation-timing-function: ease-out;
}
.rocket span:before,
.rocket span:after{ content: ''; position: absolute; display: block; width: 51%; top:50%; height: 50%; background-color: #a71732;
}
.rocket span:before{ right: 0; border-bottom-right-radius: 100%;
}
.rocket span:after{ left: -3px; border-left: 3px solid #444244;
}
/* fins */
.rocket span i.fin-top,
.rocket span i.fin-bottom{ display: block; position: absolute; left: -4px; width: 10px; height: 10px; background-color: #7f0e27; border-left: 3px solid #D11C40;
}
.rocket span i.fin-top:before,
.rocket span i.fin-bottom:before{ content: ''; position: absolute; left: 5px; width: 10px; height: 100%; background-color: #7f0e27; bottom: 0;
}
.rocket span i.fin-top{ top: -10px; -webkit-transform: skew(35deg, 0deg); -moz-transform: skew(35deg, 0deg); -o-transform: skew(35deg, 0deg); transform: skew(35deg, 0deg);
}
.rocket span i.fin-bottom{ bottom: -10px; -webkit-transform: skew(-35deg, 0deg); -moz-transform: skew(-35deg, 0deg); -o-transform: skew(-35deg, 0deg); transform: skew(-35deg, 0deg);
}
.rocket span i.fin-top:before{ -webkit-transform: skew(40deg, 0deg); -moz-transform: skew(40deg, 0deg); -o-transform: skew(40deg, 0deg); transform: skew(40deg, 0deg);
}
.rocket span i.fin-bottom:before{ -webkit-transform: skew(-40deg, 0deg); -moz-transform: skew(-40deg, 0deg); -o-transform: skew(-40deg, 0deg); transform: skew(-40deg, 0deg);
}
.rocket span i.faya{ position: absolute; display: block; left: -33px; width: 30px; height: 100%; overflow: hidden;
}
.rocket span i.faya:before{ position: absolute; content: ''; display: block; width: 220px; height: 20px; left: 0; top:0; border-radius: 100%; background-color: #f45224; -webkit-animation: vrouming 200ms infinite; -moz-animation: vrouming 200ms infinite; -o-animation: vrouming 200ms infinite; animation: vrouming 200ms infinite;
}
.rocket span i.faya:after{ position: absolute; content: ''; display: block; width: 220px; height: 10px; left: 10px; top: 5px; border-radius: 100%; background-color: #ffedd5; -webkit-animation: vrouming 200ms infinite; -moz-animation: vrouming 200ms infinite; -o-animation: vrouming 200ms infinite; animation: vrouming 200ms infinite;
}
.rocket span i.wastes{ position: absolute; left: -53px; top: -10px; width: 50px; height: 200%;
}
.rocket span i.wastes i{ position: absolute; width: 3px; right: 0; height: 1px; background-color: rgba(255, 255, 255, 0.5);
}
.rocket span i.wastes i:nth-child(1){ top:15px; -webkit-animation: wasting 500ms infinite 100ms; -moz-animation: wasting 500ms infinite 100ms; -o-animation: wasting 500ms infinite 100ms; animation: wasting 500ms infinite 100ms;
}
.rocket span i.wastes i:nth-child(2){ top:17px; -webkit-animation: wasting2 500ms infinite 200ms; -moz-animation: wasting2 500ms infinite 200ms; -o-animation: wasting2 500ms infinite 200ms; animation: wasting2 500ms infinite 200ms;
}
.rocket span i.wastes i:nth-child(3){ top:19px; -webkit-animation: wasting 500ms infinite 300ms; -moz-animation: wasting 500ms infinite 300ms; -o-animation: wasting 500ms infinite 300ms; animation: wasting 500ms infinite 300ms;
}
.rocket span i.wastes i:nth-child(4){ top:21px; -webkit-animation: wasting2 500ms infinite 400ms; -moz-animation: wasting2 500ms infinite 400ms; -o-animation: wasting2 500ms infinite 400ms; animation: wasting2 500ms infinite 400ms;
}
.rocket span i.wastes i:nth-child(5){ top:23px; -webkit-animation: wasting 500ms infinite 100ms; -moz-animation: wasting 500ms infinite 100ms; -o-animation: wasting 500ms infinite 100ms; animation: wasting 500ms infinite 100ms;
}
/* wiggling */
@-webkit-keyframes wiggling { 0% { -webkit-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); } 50% { -webkit-transform: translate3d(0px, -4px, 0); transform: translate3d(0px, -4px, 0); } 100% { -webkit-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); }
}
@-moz-keyframes wiggling { 0% { -moz-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); } 50% { -moz-transform: translate3d(0px, -4px, 0); transform: translate3d(0px, -4px, 0); } 100% { -moz-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); }
}
@-o-keyframes wiggling { 0% { -o-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); } 50% { -o-transform: translate3d(0px, -4px, 0); transform: translate3d(0px, -4px, 0); } 100% { -o-transform: translate3d(0px, 0px, 0); transform: translate3d(0px, 0px, 0); }
}
@keyframes wiggling { 0% { transform: translate3d(0px, 0px, 0); } 50% { transform: translate3d(0px, -4px, 0); } 100% { transform: translate3d(0px, 0px, 0); }
}
/* vrouming */
@-webkit-keyframes vrouming { 0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 50% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); }
}
@-moz-keyframes vrouming { 0% { -moz-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 50% { -moz-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -moz-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); }
}
@-o-keyframes vrouming { 0% { -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 50% { -o-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); }
}
@keyframes vrouming { 0% { transform: translate3d(0px, 0, 0); } 50% { transform: translate3d(5px, 0, 0); } 100% { transform: translate3d(0px, 0, 0); }
}
/* wiggling */
@-webkit-keyframes wasting { 0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -webkit-transform: translate3d(-40px, -5px, 0); transform: translate3d(-40px, -5px, 0); }
}
@-moz-keyframes wasting { 0% { -moz-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(-40px, -5px, 0); transform: translate3d(-40px, -5px, 0); }
}
@-o-keyframes wasting { 0% { -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -o-transform: translate3d(-40px, -5px, 0); transform: translate3d(-40px, -5px, 0); }
}
@keyframes wasting { 0% { transform: translate3d(0px, 0, 0); } 100% { transform: translate3d(-40px, -5px, 0); }
}
/* wasting2 */
@-webkit-keyframes wasting2 { 0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -webkit-transform: translate3d(-40px, 5px, 0); transform: translate3d(-40px, 5px, 0); }
}
@-moz-keyframes wasting2 { 0% { -moz-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(-40px, 5px, 0); transform: translate3d(-40px, 5px, 0); }
}
@-o-keyframes wasting2 { 0% { -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -o-transform: translate3d(-40px, 5px, 0); transform: translate3d(-40px, 5px, 0); }
}
@keyframes wasting2 { 0% { transform: translate3d(0px, 0, 0); } 100% { transform: translate3d(-40px, 5px, 0); }
}
| Developer | Kévin Boudot |
| Username | kevinboudot |
| Uploaded | October 17, 2022 |
| Rating | 3.5 |
| Size | 2,456 Kb |
| Views | 16,192 |
Do you need developer help for Css3 - Rocket?
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!
Kévin Boudot (kevinboudot) Script Codes
| Name | Size |
| Canvas - Transfer | 2,867 Kb |
| Canvas - Seam | 2,471 Kb |
| Canvas - Stress | 2,690 Kb |
| SC API test | 2,927 Kb |
| Demo - Easing Delta | 2,122 Kb |
| Demo - Magnetic Button | 2,291 Kb |
| Eases | 0 Kb |
| Demo - Simple Parallax | 1,999 Kb |
Create amazing art & images 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 |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
| Wikipedia Viewer | Codinger | 4,681 Kb |
| Flower expansion | Sreucherand | 3,425 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| Spin | Elalemanyo | 8,262 Kb |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
| SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
| Pure CSS Animated Photo Stack | Depthdev | 2,486 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!