CSS Jellyfish

Developer

Size

5,609 Kb

Views

74,888

CSS Jellyfish Previews
CSS Jellyfish HTML Codes
CSS Jellyfish CSS Codes

How do I make an css jellyfish?

All hail King Neptune and his water-breathers.. What is a css jellyfish? How do you make a css jellyfish? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

CSS Jellyfish Previews

CSS Jellyfish - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Jellyfish</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ *, *:after, *:before { box-sizing: border-box;
}
@keyframes fadeIn { to { opacity: 1; }
}
@keyframes drift { 0% { transform: rotateX(15deg) rotateZ(15deg) rotateY(0) scale(1); } 15% { transform: rotateX(35deg) rotateZ(30deg) rotateY(-50deg) scale(1.3); opacity: 1; } 75% { transform: rotateX(-35deg) rotateZ(-30deg) rotateY(50deg) scale(0.7); opacity: 0.6; } 100% { transform: rotateX(15deg) rotateZ(15deg) rotateY(0) scale(1); }
}
@keyframes pulse { 15% { height: 70%; width: 60%; left: 30%; opacity: 0.5; } 70% { height: 20%; }
}
@keyframes luminesce { 0% { border-width: 55px 3px 55px 0; border-color: rgba(255, 255, 179, 0.045) #d2b3ff transparent transparent; } 25% { border-width: 55px 2px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(225, 204, 255, 0.1) transparent transparent; } 50% { border-width: 55px 3px 55px 0; border-color: rgba(255, 255, 179, 0.045) #ffffb3 transparent transparent; } 75% { border-width: 55px 2px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(255, 255, 204, 0.1) transparent transparent; }
}
@keyframes move { 33.33% { transform: translateY(-32px) translateX(32px) translateZ(112px) rotateY(70deg) rotateX(10deg) rotateZ(-10deg); } 100%;
}
body { overflow: hidden; min-height: 100%; background: #010318; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxMDczNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAxMDMxOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #010737), color-stop(100%, #010318)); background-image: -moz-linear-gradient(#010737, #010318); background-image: -webkit-linear-gradient(#010737, #010318); background-image: linear-gradient(#010737, #010318); background-repeat: no-repeat; -webkit-filter: blur(1.5px);
}
.scene { width: 400px; height: 100%; margin: 15% auto 0; perspective: 99999; opacity: 0; animation: fadeIn 10s forwards linear;
}
.wrapper { width: 100%; height: 100%; transform-style: preserve-3d; animation: drift 100s infinite linear;
}
.jellyfish { position: relative; width: 400px; height: 600px; margin: 0 auto; transform-style: preserve-3d; animation: move 12s infinite ease-in-out;
}
.jellyfish_ring { position: absolute; top: 0; left: 0; width: 100%; height: 50%; opacity: 0.8; border-width: 55px 5px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(185, 179, 255, 0.15) transparent transparent; border-style: solid; border-radius: 50%; animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(1) { transform: rotateY(22.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(2) { transform: rotateY(45deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(3) { transform: rotateY(67.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(4) { transform: rotateY(90deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(5) { transform: rotateY(112.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(6) { transform: rotateY(135deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(7) { transform: rotateY(157.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(8) { transform: rotateY(180deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(9) { transform: rotateY(202.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(10) { transform: rotateY(225deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(11) { transform: rotateY(247.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(12) { transform: rotateY(270deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(13) { transform: rotateY(292.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(14) { transform: rotateY(315deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(15) { transform: rotateY(337.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(16) { transform: rotateY(360deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='scene'> <div class='wrapper'> <div class='jellyfish'> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> <div class='jellyfish_ring'></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Jellyfish - Script Codes CSS Codes

*, *:after, *:before { box-sizing: border-box;
}
@keyframes fadeIn { to { opacity: 1; }
}
@keyframes drift { 0% { transform: rotateX(15deg) rotateZ(15deg) rotateY(0) scale(1); } 15% { transform: rotateX(35deg) rotateZ(30deg) rotateY(-50deg) scale(1.3); opacity: 1; } 75% { transform: rotateX(-35deg) rotateZ(-30deg) rotateY(50deg) scale(0.7); opacity: 0.6; } 100% { transform: rotateX(15deg) rotateZ(15deg) rotateY(0) scale(1); }
}
@keyframes pulse { 15% { height: 70%; width: 60%; left: 30%; opacity: 0.5; } 70% { height: 20%; }
}
@keyframes luminesce { 0% { border-width: 55px 3px 55px 0; border-color: rgba(255, 255, 179, 0.045) #d2b3ff transparent transparent; } 25% { border-width: 55px 2px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(225, 204, 255, 0.1) transparent transparent; } 50% { border-width: 55px 3px 55px 0; border-color: rgba(255, 255, 179, 0.045) #ffffb3 transparent transparent; } 75% { border-width: 55px 2px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(255, 255, 204, 0.1) transparent transparent; }
}
@keyframes move { 33.33% { transform: translateY(-32px) translateX(32px) translateZ(112px) rotateY(70deg) rotateX(10deg) rotateZ(-10deg); } 100%;
}
body { overflow: hidden; min-height: 100%; background: #010318; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxMDczNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAxMDMxOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #010737), color-stop(100%, #010318)); background-image: -moz-linear-gradient(#010737, #010318); background-image: -webkit-linear-gradient(#010737, #010318); background-image: linear-gradient(#010737, #010318); background-repeat: no-repeat; -webkit-filter: blur(1.5px);
}
.scene { width: 400px; height: 100%; margin: 15% auto 0; perspective: 99999; opacity: 0; animation: fadeIn 10s forwards linear;
}
.wrapper { width: 100%; height: 100%; transform-style: preserve-3d; animation: drift 100s infinite linear;
}
.jellyfish { position: relative; width: 400px; height: 600px; margin: 0 auto; transform-style: preserve-3d; animation: move 12s infinite ease-in-out;
}
.jellyfish_ring { position: absolute; top: 0; left: 0; width: 100%; height: 50%; opacity: 0.8; border-width: 55px 5px 55px 0; border-color: rgba(255, 255, 179, 0.045) rgba(185, 179, 255, 0.15) transparent transparent; border-style: solid; border-radius: 50%; animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(1) { transform: rotateY(22.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(2) { transform: rotateY(45deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(3) { transform: rotateY(67.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(4) { transform: rotateY(90deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(5) { transform: rotateY(112.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(6) { transform: rotateY(135deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(7) { transform: rotateY(157.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(8) { transform: rotateY(180deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(9) { transform: rotateY(202.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(10) { transform: rotateY(225deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(11) { transform: rotateY(247.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(12) { transform: rotateY(270deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(13) { transform: rotateY(292.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(14) { transform: rotateY(315deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(15) { transform: rotateY(337.5deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.jellyfish_ring:nth-child(16) { transform: rotateY(360deg); animation: pulse 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}

Home Page	Home
Developer	Noah Blon
Username	noahblon
Uploaded	June 24, 2022
Rating	4.5
Size	5,609 Kb
Views	74,888

Do you need developer help for CSS Jellyfish?

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!

Noah Blon (noahblon) Script Codes

Name	Size
9 Pens	3,350 Kb
An Intro to SVG Animation with SMIL - Example 1	1,987 Kb
Carousel	3,349 Kb
Glitch Pop	4,644 Kb
Colored SVG background-image - Mask Method	2,328 Kb
Juggle	3,302 Kb
Free Radicals	33,329 Kb
Planet	3,572 Kb
3D CSS Text with Perspective	4,044 Kb
Burton Ball	4,499 Kb

Create amazing love letters 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
TweenMax transformOrigin Bubble	Nicolund	2,209 Kb
A Pen by Malith Hettiarachchi	MalZiiirA	5,531 Kb
DIV wormhole	Heydon	1,932 Kb
Progressively reveal dots on a Bezier curve	GreenSock	2,489 Kb
Page Transitions in Backbone	Mikefowler	3,691 Kb
Tree growth tests	Orchard	3,818 Kb
Google Chrome Icon using Pure CSS in one DIV	Grssam	3,627 Kb
The Rope	Chribbe	2,886 Kb
Multi column experiment.	Spylefkaditis	2,805 Kb
Ionic - Wordpress REST API starter	Superpikar	2,961 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!