Infinite Cosmic Zoom Animation Moon and Star using HTML & CSS Star & Moon Tunnel
In this step-by-step tutorial, learn how to build a hypnotic Infinite Star & Moon Zoom Tunnel Animation using 100% Pure HTML and CSS—with zero JavaScript!
🌟 Project Highlights:
Seamless Infinite Zoom Loop: Staggers multiple CSS layer animations with calculated negative delays (
0s,-3s,-6s) to form a smooth, endless cosmic tunnel.3D Perspective Scaling: Uses CSS
@keyframeswithtransform: scale()and 3D rotation to create deep space optical illusions.Pure CSS Crescent Moons: Renders detailed glowing crescent moons using CSS
box-shadowandfilter: drop-shadow().Glowing Cosmic Effects: Features multi-layered text shadows and dashed orbit rings in neon cyan, gold, and purple hues.
Zero JavaScript Dependencies: Lightweight, self-contained single-file code that requires no JS libraries or external downloads.
This project is ideal for beginner-to-intermediate web developers looking to master CSS Keyframes, CSS Variables, 3D Transforms, and Box Shadow techniques!
If you enjoyed this tutorial, make sure to Like, Share, and Subscribe to Computer Soft Skills for more creative coding content!
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- Continuous, seamless infinite zoom effect combining glowing stars and moons into deep space ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Star & Moon Zoom</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #030308;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* ======= FULLSCREEN ZOOM CONTAINER ======= */
.zoom-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
/* ======= ZOOM LAYER BASE ======= */
.zoom-layer {
position: absolute;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
/* Infinite Scaling Animation */
animation: infiniteZoom 9s linear infinite;
}
/* Offset timings for endless continuous zoom */
.layer-1 { animation-delay: 0s; }
.layer-2 { animation-delay: -3s; }
.layer-3 { animation-delay: -6s; }
/* ======= MOON & STAR ELEMENTS ======= */
/* Central Crescent Moon */
.moon {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: -22px 12px 0 0 #ffd700;
filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
transform: rotate(-15deg);
}
/* Orbiting Glowing Stars around Moon */
.star {
position: absolute;
color: #ffffff;
font-size: 2rem;
text-shadow: 0 0 10px #ffffff, 0 0 25px #00e5ff, 0 0 45px #ba55d3;
user-select: none;
}
/* Star Positions on Ring */
.star-1 { top: 10%; left: 15%; font-size: 2.5rem; }
.star-2 { top: 20%; right: 10%; font-size: 1.8rem; }
.star-3 { bottom: 15%; left: 20%; font-size: 2.2rem; }
.star-4 { bottom: 10%; right: 15%; font-size: 2.8rem; }
.star-5 { top: -10%; left: 50%; font-size: 1.5rem; }
/* Outer Orbit Ring */
.ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.2), 0 0 30px rgba(186, 85, 211, 0.2);
}
/* ======= INFINITE ZOOM ANIMATION ======= */
@keyframes infiniteZoom {
0% {
transform: scale(0.01) rotate(0deg);
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
transform: scale(10) rotate(90deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="zoom-container">
<!-- Layer 1 -->
<div class="zoom-layer layer-1">
<div class="ring"></div>
<div class="moon"></div>
<div class="star star-1">✦</div>
<div class="star star-2">★</div>
<div class="star star-3">✧</div>
<div class="star star-4">✦</div>
<div class="star star-5">★</div>
</div>
<!-- Layer 2 -->
<div class="zoom-layer layer-2">
<div class="ring" style="border-color: rgba(255, 215, 0, 0.3);"></div>
<div class="moon" style="box-shadow: -22px 12px 0 0 #ffffff; filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));"></div>
<div class="star star-1" style="color: #ffd700;">★</div>
<div class="star star-2" style="color: #ffffff;">✦</div>
<div class="star star-3" style="color: #ffd700;">✦</div>
<div class="star star-4" style="color: #ffffff;">✧</div>
<div class="star star-5" style="color: #ffd700;">★</div>
</div>
<!-- Layer 3 -->
<div class="zoom-layer layer-3">
<div class="ring" style="border-color: rgba(0, 229, 255, 0.3);"></div>
<div class="moon" style="box-shadow: -22px 12px 0 0 #00e5ff; filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.9));"></div>
<div class="star star-1" style="color: #ba55d3;">✧</div>
<div class="star star-2" style="color: #00e5ff;">★</div>
<div class="star star-3" style="color: #ba55d3;">★</div>
<div class="star star-4" style="color: #00e5ff;">✦</div>
<div class="star star-5" style="color: #ba55d3;">✧</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment