Jellyfish
How do I make an jellyfish?
The HAML generates 30 circles which are resized in Less in increments of 10. The wrapper is rotated and each circle is translating at a different delay. What is a jellyfish? How do you make a jellyfish? This script and codes were developed by Michael Hobizal on 05 January 2023, Thursday.
Jellyfish - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jellyfish</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! */ body { perspective: 1000px; background: black;
}
.wrap { position: absolute; margin: 40px auto 0; left: 50%; margin-left: -224px; transform: rotateX(75deg);
}
.circle { position: absolute; float: left; border: 1px solid white; animation: bounce 1.5s infinite ease-in-out alternate; border-radius: 100%; background: transparent; top: -75px; left: -75px;
}
.circle:nth-child(1) { margin: 295px; width: 10px; height: 10px; animation-delay: 100ms; z-index: -1; border: 1px solid rgba(255, 43, 0, 0.7);
}
.circle:nth-child(2) { margin: 290px; width: 20px; height: 20px; animation-delay: 200ms; z-index: -2; border: 1px solid rgba(255, 85, 0, 0.7);
}
.circle:nth-child(3) { margin: 285px; width: 30px; height: 30px; animation-delay: 300ms; z-index: -3; border: 1px solid rgba(255, 128, 0, 0.7);
}
.circle:nth-child(4) { margin: 280px; width: 40px; height: 40px; animation-delay: 400ms; z-index: -4; border: 1px solid rgba(255, 170, 0, 0.7);
}
.circle:nth-child(5) { margin: 275px; width: 50px; height: 50px; animation-delay: 500ms; z-index: -5; border: 1px solid rgba(255, 213, 0, 0.7);
}
.circle:nth-child(6) { margin: 270px; width: 60px; height: 60px; animation-delay: 600ms; z-index: -6; border: 1px solid rgba(255, 255, 0, 0.7);
}
.circle:nth-child(7) { margin: 265px; width: 70px; height: 70px; animation-delay: 700ms; z-index: -7; border: 1px solid rgba(212, 255, 0, 0.7);
}
.circle:nth-child(8) { margin: 260px; width: 80px; height: 80px; animation-delay: 800ms; z-index: -8; border: 1px solid rgba(170, 255, 0, 0.7);
}
.circle:nth-child(9) { margin: 255px; width: 90px; height: 90px; animation-delay: 900ms; z-index: -9; border: 1px solid rgba(128, 255, 0, 0.7);
}
.circle:nth-child(10) { margin: 250px; width: 100px; height: 100px; animation-delay: 1000ms; z-index: -10; border: 1px solid rgba(85, 255, 0, 0.7);
}
.circle:nth-child(11) { margin: 245px; width: 110px; height: 110px; animation-delay: 1100ms; z-index: -11; border: 1px solid rgba(43, 255, 0, 0.7);
}
.circle:nth-child(12) { margin: 240px; width: 120px; height: 120px; animation-delay: 1200ms; z-index: -12; border: 1px solid rgba(0, 255, 0, 0.7);
}
.circle:nth-child(13) { margin: 235px; width: 130px; height: 130px; animation-delay: 1300ms; z-index: -13; border: 1px solid rgba(0, 255, 43, 0.7);
}
.circle:nth-child(14) { margin: 230px; width: 140px; height: 140px; animation-delay: 1400ms; z-index: -14; border: 1px solid rgba(0, 255, 85, 0.7);
}
.circle:nth-child(15) { margin: 225px; width: 150px; height: 150px; animation-delay: 1500ms; z-index: -15; border: 1px solid rgba(0, 255, 128, 0.7);
}
.circle:nth-child(16) { margin: 220px; width: 160px; height: 160px; animation-delay: 1600ms; z-index: -16; border: 1px solid rgba(0, 255, 170, 0.7);
}
.circle:nth-child(17) { margin: 215px; width: 170px; height: 170px; animation-delay: 1700ms; z-index: -17; border: 1px solid rgba(0, 255, 213, 0.7);
}
.circle:nth-child(18) { margin: 210px; width: 180px; height: 180px; animation-delay: 1800ms; z-index: -18; border: 1px solid rgba(0, 255, 255, 0.7);
}
.circle:nth-child(19) { margin: 205px; width: 190px; height: 190px; animation-delay: 1900ms; z-index: -19; border: 1px solid rgba(0, 212, 255, 0.7);
}
.circle:nth-child(20) { margin: 200px; width: 200px; height: 200px; animation-delay: 2000ms; z-index: -20; border: 1px solid rgba(0, 170, 255, 0.7);
}
.circle:nth-child(21) { margin: 195px; width: 210px; height: 210px; animation-delay: 2100ms; z-index: -21; border: 1px solid rgba(0, 127, 255, 0.7);
}
.circle:nth-child(22) { margin: 190px; width: 220px; height: 220px; animation-delay: 2200ms; z-index: -22; border: 1px solid rgba(0, 85, 255, 0.7);
}
.circle:nth-child(23) { margin: 185px; width: 230px; height: 230px; animation-delay: 2300ms; z-index: -23; border: 1px solid rgba(0, 43, 255, 0.7);
}
.circle:nth-child(24) { margin: 180px; width: 240px; height: 240px; animation-delay: 2400ms; z-index: -24; border: 1px solid rgba(0, 0, 255, 0.7);
}
.circle:nth-child(25) { margin: 175px; width: 250px; height: 250px; animation-delay: 2500ms; z-index: -25; border: 1px solid rgba(42, 0, 255, 0.7);
}
.circle:nth-child(26) { margin: 170px; width: 260px; height: 260px; animation-delay: 2600ms; z-index: -26; border: 1px solid rgba(85, 0, 255, 0.7);
}
.circle:nth-child(27) { margin: 165px; width: 270px; height: 270px; animation-delay: 2700ms; z-index: -27; border: 1px solid rgba(127, 0, 255, 0.7);
}
.circle:nth-child(28) { margin: 160px; width: 280px; height: 280px; animation-delay: 2800ms; z-index: -28; border: 1px solid rgba(170, 0, 255, 0.7);
}
.circle:nth-child(29) { margin: 155px; width: 290px; height: 290px; animation-delay: 2900ms; z-index: -29; border: 1px solid rgba(212, 0, 255, 0.7);
}
.circle:nth-child(30) { margin: 150px; width: 300px; height: 300px; animation-delay: 3000ms; z-index: -30; border: 1px solid rgba(255, 0, 255, 0.7);
}
@keyframes bounce { 0% { transform: translateY(0px); } 100% { transform: translateY(100px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='wrap'> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div>
</div>
</body>
</html>
Jellyfish - Script Codes CSS Codes
body { perspective: 1000px; background: black;
}
.wrap { position: absolute; margin: 40px auto 0; left: 50%; margin-left: -224px; transform: rotateX(75deg);
}
.circle { position: absolute; float: left; border: 1px solid white; animation: bounce 1.5s infinite ease-in-out alternate; border-radius: 100%; background: transparent; top: -75px; left: -75px;
}
.circle:nth-child(1) { margin: 295px; width: 10px; height: 10px; animation-delay: 100ms; z-index: -1; border: 1px solid rgba(255, 43, 0, 0.7);
}
.circle:nth-child(2) { margin: 290px; width: 20px; height: 20px; animation-delay: 200ms; z-index: -2; border: 1px solid rgba(255, 85, 0, 0.7);
}
.circle:nth-child(3) { margin: 285px; width: 30px; height: 30px; animation-delay: 300ms; z-index: -3; border: 1px solid rgba(255, 128, 0, 0.7);
}
.circle:nth-child(4) { margin: 280px; width: 40px; height: 40px; animation-delay: 400ms; z-index: -4; border: 1px solid rgba(255, 170, 0, 0.7);
}
.circle:nth-child(5) { margin: 275px; width: 50px; height: 50px; animation-delay: 500ms; z-index: -5; border: 1px solid rgba(255, 213, 0, 0.7);
}
.circle:nth-child(6) { margin: 270px; width: 60px; height: 60px; animation-delay: 600ms; z-index: -6; border: 1px solid rgba(255, 255, 0, 0.7);
}
.circle:nth-child(7) { margin: 265px; width: 70px; height: 70px; animation-delay: 700ms; z-index: -7; border: 1px solid rgba(212, 255, 0, 0.7);
}
.circle:nth-child(8) { margin: 260px; width: 80px; height: 80px; animation-delay: 800ms; z-index: -8; border: 1px solid rgba(170, 255, 0, 0.7);
}
.circle:nth-child(9) { margin: 255px; width: 90px; height: 90px; animation-delay: 900ms; z-index: -9; border: 1px solid rgba(128, 255, 0, 0.7);
}
.circle:nth-child(10) { margin: 250px; width: 100px; height: 100px; animation-delay: 1000ms; z-index: -10; border: 1px solid rgba(85, 255, 0, 0.7);
}
.circle:nth-child(11) { margin: 245px; width: 110px; height: 110px; animation-delay: 1100ms; z-index: -11; border: 1px solid rgba(43, 255, 0, 0.7);
}
.circle:nth-child(12) { margin: 240px; width: 120px; height: 120px; animation-delay: 1200ms; z-index: -12; border: 1px solid rgba(0, 255, 0, 0.7);
}
.circle:nth-child(13) { margin: 235px; width: 130px; height: 130px; animation-delay: 1300ms; z-index: -13; border: 1px solid rgba(0, 255, 43, 0.7);
}
.circle:nth-child(14) { margin: 230px; width: 140px; height: 140px; animation-delay: 1400ms; z-index: -14; border: 1px solid rgba(0, 255, 85, 0.7);
}
.circle:nth-child(15) { margin: 225px; width: 150px; height: 150px; animation-delay: 1500ms; z-index: -15; border: 1px solid rgba(0, 255, 128, 0.7);
}
.circle:nth-child(16) { margin: 220px; width: 160px; height: 160px; animation-delay: 1600ms; z-index: -16; border: 1px solid rgba(0, 255, 170, 0.7);
}
.circle:nth-child(17) { margin: 215px; width: 170px; height: 170px; animation-delay: 1700ms; z-index: -17; border: 1px solid rgba(0, 255, 213, 0.7);
}
.circle:nth-child(18) { margin: 210px; width: 180px; height: 180px; animation-delay: 1800ms; z-index: -18; border: 1px solid rgba(0, 255, 255, 0.7);
}
.circle:nth-child(19) { margin: 205px; width: 190px; height: 190px; animation-delay: 1900ms; z-index: -19; border: 1px solid rgba(0, 212, 255, 0.7);
}
.circle:nth-child(20) { margin: 200px; width: 200px; height: 200px; animation-delay: 2000ms; z-index: -20; border: 1px solid rgba(0, 170, 255, 0.7);
}
.circle:nth-child(21) { margin: 195px; width: 210px; height: 210px; animation-delay: 2100ms; z-index: -21; border: 1px solid rgba(0, 127, 255, 0.7);
}
.circle:nth-child(22) { margin: 190px; width: 220px; height: 220px; animation-delay: 2200ms; z-index: -22; border: 1px solid rgba(0, 85, 255, 0.7);
}
.circle:nth-child(23) { margin: 185px; width: 230px; height: 230px; animation-delay: 2300ms; z-index: -23; border: 1px solid rgba(0, 43, 255, 0.7);
}
.circle:nth-child(24) { margin: 180px; width: 240px; height: 240px; animation-delay: 2400ms; z-index: -24; border: 1px solid rgba(0, 0, 255, 0.7);
}
.circle:nth-child(25) { margin: 175px; width: 250px; height: 250px; animation-delay: 2500ms; z-index: -25; border: 1px solid rgba(42, 0, 255, 0.7);
}
.circle:nth-child(26) { margin: 170px; width: 260px; height: 260px; animation-delay: 2600ms; z-index: -26; border: 1px solid rgba(85, 0, 255, 0.7);
}
.circle:nth-child(27) { margin: 165px; width: 270px; height: 270px; animation-delay: 2700ms; z-index: -27; border: 1px solid rgba(127, 0, 255, 0.7);
}
.circle:nth-child(28) { margin: 160px; width: 280px; height: 280px; animation-delay: 2800ms; z-index: -28; border: 1px solid rgba(170, 0, 255, 0.7);
}
.circle:nth-child(29) { margin: 155px; width: 290px; height: 290px; animation-delay: 2900ms; z-index: -29; border: 1px solid rgba(212, 0, 255, 0.7);
}
.circle:nth-child(30) { margin: 150px; width: 300px; height: 300px; animation-delay: 3000ms; z-index: -30; border: 1px solid rgba(255, 0, 255, 0.7);
}
@keyframes bounce { 0% { transform: translateY(0px); } 100% { transform: translateY(100px); }
}
Developer | Michael Hobizal |
Username | mikehobizal |
Uploaded | January 05, 2023 |
Rating | 4 |
Size | 4,178 Kb |
Views | 14,168 |
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 |
Tacklebox Preloader | 3,273 Kb |
CSS Chart with clip-path | 3,524 Kb |
Wireframe Cube | 3,818 Kb |
CSS Confetti Hover | 3,270 Kb |
CSS Infinity Loader | 3,500 Kb |
Triangles Loader | 2,603 Kb |
CSS Letter Animation | 5,812 Kb |
CSS Ellipses Animation | 2,733 Kb |
Another Download Link | 2,764 Kb |
Jellyfish | 4,178 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 |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Tab Menus | Zephyr | 3,180 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Layout 11 | Altynai | 1,690 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
About Mazano | Kiti | 2,585 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!