Gooey Eclipse
How do I make an gooey eclipse?
Trying the gooey effect. What is a gooey eclipse? How do you make a gooey eclipse? This script and codes were developed by Keyon on 10 January 2023, Tuesday.
Gooey Eclipse - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gooey Eclipse</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blobs"> <div class="blob four move"></div> <div class="norm blob one"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs>
</svg>
</body>
</html>
Gooey Eclipse - Script Codes CSS Codes
body { background: #BBDEFB; animation: sky 20s infinite linear;
}
.blobs{ filter:url('#goo'); position:fixed; left: 0; top: 0; width: 100%; height: 100%;
}
.one { left: 50%; animation: moon 20s infinite linear;
}
.four { left: calc(50% - 50px); transform: scale(0.5); animation: loader 20s infinite ease; filter: blur(25px); opacity: 1 !important; background: rgba(255,255,255,1) !important;
}
@-webkit-keyframes loader { 0% {transform: translate(500px, 0px) scale(0.9);} 25% {transform: translate(45px, 0px) scale(0.9);} 50% {transform: translate(-375px, 0px) scale(0.9);} 75% {transform: translate(45px, 0px) scale(0.9);} 100% {transform: translate(500px, 0px) scale(0.9);}
}
@-webkit-keyframes moon { 0% {background-position: 100% 50%;} 17% {background-position: 50% 50%;} 25% {background-position: 50% 50%;} 50% {background-position: 0% 50%;} 67% {background-position: 50% 50%;} 75% {background-position: 50% 50%;} 100% {background-position: 100% 50%;}
}
@-webkit-keyframes sky { 0% {background: #BBDEFB;} 17.5% {background: #07202C;} 25% {background: #07202C;} 50% {background: #BBDEFB;} 67.5% {background: #07202C;} 75% {background: #07202C;} 100% {background: #BBDEFB;}
}
.blob{ position:fixed; background: linear-gradient(90deg,#fff, #ECEFF1, #CFD8DC, #263238, #263238, #CFD8DC, #ECEFF1, #fff); background-size: 1000% 1000%; top:50%; width:100px; height:100px; line-height:100px; text-align:center; color:white; font-size:40px; border-radius:100%; margin-top:-50px; margin-left:-50px;
}
.norm { filter: blur(1px);
}
| Developer | Keyon |
| Username | Keyon |
| Uploaded | January 10, 2023 |
| Rating | 4.5 |
| Size | 2,073 Kb |
| Views | 10,120 |
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 |
| Simple Login | 3,675 Kb |
| Switch Logo | 2,864 Kb |
| Notepad Project Neon | 5,072 Kb |
| Cloud OS | 7,135 Kb |
| Polaroid Snap Realistic | 4,845 Kb |
| Heart Beat | 3,505 Kb |
| Marco, the angry rectangle | 2,672 Kb |
| Zelda Breath of the Wild Cartridge | 3,561 Kb |
| Switch | 2,390 Kb |
| Profile Box | 3,090 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 |
| Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
| Find The Penguin | Lelder | 2,212 Kb |
| Template | Indra_z85 | 2,323 Kb |
| Dribbble Template | ExtremelyGinger | 2,204 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Webkit decolorize | Fivera | 1,675 Kb |
| HEXAGON | Aurumlux | 1,684 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| 404 Error Page | WebSonick | 3,203 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!