DEV Community

Aditya Singh
Aditya Singh

Posted on

Animated Solar system

#codepen

User
Uploaded image
MUJHE HTML AUR CSS KA USE KARTE HUYE THIK AISA HI RUNIG SOLLLER SYSYTEM KA ANIMATED CODE CHAHIYE JISE MAI CODE PEN PE CHLA SAKU
ChatGPT
Certainly! Below is a sample HTML and CSS code that creates an animated representation of the solar system similar to the image you provided. You can run this code on CodePen or any other HTML/CSS editor.

HTML:
html
Copy code
<!DOCTYPE html>




Solar System Animation
































CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate 20s linear infinite;
}

.mercury-orbit {
width: 150px;
height: 150px;
}

.venus-orbit {
width: 200px;
height: 200px;
}

.earth-orbit {
width: 250px;
height: 250px;
}

.mars-orbit {
width: 300px;
height: 300px;
}

.jupiter-orbit {
width: 350px;
height: 350px;
}

.saturn-orbit {
width: 400px;
height: 400px;
}

.uranus-orbit {
width: 450px;
height: 450px;
}

.neptune-orbit {
width: 500px;
height: 500px;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%);
}

.mercury {
width: 8px;
height: 8px;
background-color: gray;
}

.venus {
width: 12px;
height: 12px;
background-color: orange;
}

.earth {
width: 14px;
height: 14px;
background-color: blue;
}

.mars {
width: 10px;
height: 10px;
background-color: red;
}

.jupiter {
width: 24px;
height: 24px;
background-color: orange;
}

.saturn {
width: 20px;
height: 20px;
background-color: lightgoldenrodyellow;
}

.uranus {
width: 18px;
height: 18px;
background-color: lightblue;
}

.neptune {
width: 16px;
height: 16px;
background-color: blue;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
To see the animation in action, copy the HTML code into the HTML section of CodePen and the CSS code into the CSS section. This code will animate the planets revolving around the sun in a simplified representation of the solar system.

planet nhi dikh rhe hai isme
ChatGPT
Planets not appearing could be due to their size, color, or animation timing in relation to the orbits. Here is an improved version that ensures the planets are more visible and correctly positioned.

HTML:
html
Copy code
<!DOCTYPE html>




Solar System Animation
































CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate linear infinite;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation-duration: 10s;
}

.venus-orbit {
width: 200px;
height: 200px;
animation-duration: 20s;
}

.earth-orbit {
width: 250px;
height: 250px;
animation-duration: 30s;
}

.mars-orbit {
width: 300px;
height: 300px;
animation-duration: 40s;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation-duration: 50s;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation-duration: 60s;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation-duration: 70s;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation-duration: 80s;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
}

.mercury {
width: 8px;
height: 8px;
background-color: gray;
}

.venus {
width: 12px;
height: 12px;
background-color: orange;
}

.earth {
width: 14px;
height: 14px;
background-color: blue;
}

.mars {
width: 10px;
height: 10px;
background-color: red;
}

.jupiter {
width: 24px;
height: 24px;
background-color: orange;
}

.saturn {
width: 20px;
height: 20px;
background-color: lightgoldenrodyellow;
}

.uranus {
width: 18px;
height: 18px;
background-color: lightblue;
}

.neptune {
width: 16px;
height: 16px;
background-color: blue;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(50%);
}
}
With this improved version, the planets should be visible and correctly positioned within their orbits. Make sure to adjust the sizes, colors, and animation durations as needed to suit your preferences.

plant ke sise ko thoda aur bda karo aur sab le sath unka nam bhi dikhna chahiye
ChatGPT
Of course! Below is the updated version of the code where the planet sizes have been increased and labels have been added to show their names.

HTML:
html
Copy code
<!DOCTYPE html>




Solar System Animation







Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune





CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate linear infinite;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation-duration: 10s;
}

.venus-orbit {
width: 200px;
height: 200px;
animation-duration: 20s;
}

.earth-orbit {
width: 250px;
height: 250px;
animation-duration: 30s;
}

.mars-orbit {
width: 300px;
height: 300px;
animation-duration: 40s;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation-duration: 50s;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation-duration: 60s;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation-duration: 70s;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation-duration: 80s;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
}

.mercury {
width: 12px; /* Increased size /
height: 12px; / Increased size */
background-color: gray;
}

.venus {
width: 18px; /* Increased size /
height: 18px; / Increased size */
background-color: orange;
}

.earth {
width: 20px; /* Increased size /
height: 20px; / Increased size */
background-color: blue;
}

.mars {
width: 16px; /* Increased size /
height: 16px; / Increased size */
background-color: red;
}

.jupiter {
width: 40px; /* Increased size /
height: 40px; / Increased size */
background-color: orange;
}

.saturn {
width: 35px; /* Increased size /
height: 35px; / Increased size */
background-color: lightgoldenrodyellow;
}

.uranus {
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: lightblue;
}

.neptune {
width: 28px; /* Increased size /
height: 28px; / Increased size */
background-color: blue;
}

.label {
position: absolute;
top: 40px; /* Adjust as necessary /
left: 50%;
transform: translateX(-50%);
font-size: 12px; / Adjust size as necessary */
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(50%);
}
}
With these adjustments, the planets should be more visible and correctly labeled with their names. You can further tweak the sizes, colors, and label positions to suit your preferences.

YE SAB 2 D ME DIKH RHA KYA ISE TUM 3D ME DIKHA SKTE HO
ChatGPT
Certainly! To create a 3D effect for the solar system, you can use CSS3 transformations. Here's how you can achieve that:

HTML:
html
Copy code
<!DOCTYPE html>




3D Solar System Animation







Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune





CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
perspective: 1000px;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
transform-style: preserve-3d;
animation: rotateSystem 60s infinite linear;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation: rotate 10s infinite linear;
}

.venus-orbit {
width: 200px;
height: 200px;
animation: rotate 20s infinite linear;
}

.earth-orbit {
width: 250px;
height: 250px;
animation: rotate 30s infinite linear;
}

.mars-orbit {
width: 300px;
height: 300px;
animation: rotate 40s infinite linear;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation: rotate 50s infinite linear;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation: rotate 60s infinite linear;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation: rotate 70s infinite linear;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation: rotate 80s infinite linear;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.mercury {
width: 12px; /* Increased size /
height: 12px; / Increased size */
background-color: gray;
}

.venus {
width: 18px; /* Increased size /
height: 18px; / Increased size */
background-color: orange;
}

.earth {
width: 20px; /* Increased size /
height: 20px; / Increased size */
background-color: blue;
}

.mars {
width: 16px; /* Increased size /
height: 16px; / Increased size */
background-color: red;
}

.jupiter {
width: 40px; /* Increased size /
height: 40px; / Increased size */
background-color: orange;
}

.saturn {
width: 35px; /* Increased size /
height: 35px; / Increased size */
background-color: lightgoldenrodyellow;
}

.uranus {
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: lightblue;
}

.neptune {
width: 28px; /* Increased size /
height: 28px; / Increased size */
background-color: blue;
}

.label {
position: absolute;
top: 40px; /* Adjust as necessary /
left: 50%;
transform: translateX(-50%);
font-size: 12px; / Adjust size as necessary */
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotateY(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotateY(360deg) translateX(50%);
}
}

@keyframes rotateSystem {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
In this version, the perspective property is added to the body to create a 3D perspective. The solar-system is animated to rotate around the Y-axis, giving a 3D effect. Each orbit and planet has transform-style: preserve-3d to maintain the 3D transformations.

Feel free to further adjust sizes, durations, and other properties to suit your needs!

Uploaded image
NHI MERA MTLB PLANET KA ROUTION ISS ENGLE SE DIKHE AISA BANAO
ChatGPT
To achieve a 3D solar system animation that mimics the perspective shown in the image, we can use CSS transformations and perspective. Here’s the updated code with a view similar to the provided image:

HTML:
html
Copy code
<!DOCTYPE html>




3D Solar System Animation







Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune





CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
perspective: 2000px;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateZ(45deg);
animation: rotateSystem 120s infinite linear;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation: rotate 10s infinite linear;
}

.venus-orbit {
width: 200px;
height: 200px;
animation: rotate 20s infinite linear;
}

.earth-orbit {
width: 250px;
height: 250px;
animation: rotate 30s infinite linear;
}

.mars-orbit {
width: 300px;
height: 300px;
animation: rotate 40s infinite linear;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation: rotate 50s infinite linear;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation: rotate 60s infinite linear;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation: rotate 70s infinite linear;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation: rotate 80s infinite linear;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.mercury {
width: 12px; /* Increased size /
height: 12px; / Increased size */
background-color: gray;
}

.venus {
width: 18px; /* Increased size /
height: 18px; / Increased size */
background-color: orange;
}

.earth {
width: 20px; /* Increased size /
height: 20px; / Increased size */
background-color: blue;
}

.mars {
width: 16px; /* Increased size /
height: 16px; / Increased size */
background-color: red;
}

.jupiter {
width: 40px; /* Increased size /
height: 40px; / Increased size */
background-color: orange;
}

.saturn {
width: 35px; /* Increased size /
height: 35px; / Increased size */
background-color: lightgoldenrodyellow;
}

.uranus {
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: lightblue;
}

.neptune {
width: 28px; /* Increased size /
height: 28px; / Increased size */
background-color: blue;
}

.label {
position: absolute;
top: 40px; /* Adjust as necessary /
left: 50%;
transform: translateX(-50%);
font-size: 12px; / Adjust size as necessary */
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotateY(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotateY(360deg) translateX(50%);
}
}

@keyframes rotateSystem {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
In this code, the perspective property on the body and transform: rotateX(45deg) rotateZ(45deg); on the .solar-system create the desired 3D effect, with the solar system tilted at an angle. The @keyframes rotateSystem animation makes the entire system slowly rotate for a dynamic view. Adjust sizes, positions, and durations as necessary to achieve the exact look you want.

How Solar System really moves #shorts #solarsystem #space #viral #vfx #animation.mp4
File
JAISA IS VEDIO ME MOVE HO RHA HAI THIK WAISA HI CODE CHAHIYE AUR HAR PLANET KE SATH USKA NAM CHAYE AUR PICHE JO BACKGROUND ME JO BLACK HAI USME GALEXY DIKHNA CHAIYE
ChatGPT
To create an animation that closely mimics the movement of planets around the sun as shown in the provided video, we'll use CSS and JavaScript for the animation. Additionally, I'll include galaxy background imagery and planet names.

HTML:
html
Copy code
<!DOCTYPE html>




3D Solar System Animation







Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune






CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('galaxy-background.jpg') no-repeat center center fixed;
background-size: cover;
color: white;
font-family: Arial, sans-serif;
perspective: 2000px;
overflow: hidden;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
transform-style: preserve-3d;
animation: rotateSystem 120s infinite linear;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation: rotate 10s infinite linear;
}

.venus-orbit {
width: 200px;
height: 200px;
animation: rotate 20s infinite linear;
}

.earth-orbit {
width: 250px;
height: 250px;
animation: rotate 30s infinite linear;
}

.mars-orbit {
width: 300px;
height: 300px;
animation: rotate 40s infinite linear;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation: rotate 50s infinite linear;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation: rotate 60s infinite linear;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation: rotate 70s infinite linear;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation: rotate 80s infinite linear;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.mercury {
width: 12px;
height: 12px;
background-color: gray;
}

.venus {
width: 18px;
height: 18px;
background-color: orange;
}

.earth {
width: 20px;
height: 20px;
background-color: blue;
}

.mars {
width: 16px;
height: 16px;
background-color: red;
}

.jupiter {
width: 40px;
height: 40px;
background-color: orange;
}

.saturn {
width: 35px;
height: 35px;
background-color: lightgoldenrodyellow;
}

.uranus {
width: 30px;
height: 30px;
background-color: lightblue;
}

.neptune {
width: 28px;
height: 28px;
background-color: blue;
}

.label {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotateY(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotateY(360deg) translateX(50%);
}
}

@keyframes rotateSystem {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
JavaScript (script.js):
javascript
Copy code
document.addEventListener("DOMContentLoaded", () => {
const solarSystem = document.querySelector('.solar-system');
let angle = 0;

function animate() {
    angle += 0.1;
    solarSystem.style.transform = `rotateX(45deg) rotateZ(${angle}deg)`;
    requestAnimationFrame(animate);
}

animate();

});
Galaxy Background Image:
You need to download a galaxy background image and save it as galaxy-background.jpg in the same directory as your HTML and CSS files.

This code will create a 3D rotating solar system animation with planet names and a galaxy background. Adjust the sizes, colors, and speeds as necessary to match your requirements.

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
}

.solar-system {
position: relative;
width: 800px;
height: 800px;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate linear infinite;
}

.mercury-orbit {
width: 150px;
height: 150px;
animation-duration: 10s;
}

.venus-orbit {
width: 200px;
height: 200px;
animation-duration: 20s;
}

.earth-orbit {
width: 250px;
height: 250px;
animation-duration: 30s;
}

.mars-orbit {
width: 300px;
height: 300px;
animation-duration: 40s;
}

.jupiter-orbit {
width: 350px;
height: 350px;
animation-duration: 50s;
}

.saturn-orbit {
width: 400px;
height: 400px;
animation-duration: 60s;
}

.uranus-orbit {
width: 450px;
height: 450px;
animation-duration: 70s;
}

.neptune-orbit {
width: 500px;
height: 500px;
animation-duration: 80s;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
}

.mercury {
width: 12px; /* Increased size /
height: 12px; / Increased size */
background-color: gray;
}

.venus {
width: 18px; /* Increased size /
height: 18px; / Increased size */
background-color: orange;
}

.earth {
width: 20px; /* Increased size /
height: 20px; / Increased size */
background-color: blue;
}

.mars {
width: 16px; /* Increased size /
height: 16px; / Increased size */
background-color: red;
}

.jupiter {
width: 40px; /* Increased size /
height: 40px; / Increased size */
background-color: orange;
}

.saturn {
width: 35px; /* Increased size /
height: 35px; / Increased size */
background-color: lightgoldenrodyellow;
}

.uranus {
width: 30px; /* Increased size /
height: 30px; / Increased size */
background-color: lightblue;
}

.neptune {
width: 28px; /* Increased size /
height: 28px; / Increased size */
background-color: blue;
}

.label {
position: absolute;
top: 40px; /* Adjust as necessary /
left: 50%;
transform: translateX(-50%);
font-size: 12px; / Adjust size as necessary */
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(50%);
}
}
ISS CODE KO AUR RESPONSIV BANAO AUR BACKGROUD ME TIMTIMMATE HUYE CHHOTE CHHOTE TARE BHI DIKHAO
ChatGPT
To make the code more responsive and add twinkling stars in the background, we will make some adjustments to the existing code and add new styles for the stars. Here's the updated code:

HTML:
html
Copy code
<!DOCTYPE html>




Responsive 3D Solar System








Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune






CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
overflow: hidden;
}

.stars {
position: absolute;
width: 100%;
height: 100%;
background: url('stars.png') repeat;
animation: twinkle 100s infinite;
}

.solar-system {
position: relative;
width: 80vmin;
height: 80vmin;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 10vmin;
height: 10vmin;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate linear infinite;
}

.mercury-orbit {
width: 15vmin;
height: 15vmin;
animation-duration: 10s;
}

.venus-orbit {
width: 20vmin;
height: 20vmin;
animation-duration: 20s;
}

.earth-orbit {
width: 25vmin;
height: 25vmin;
animation-duration: 30s;
}

.mars-orbit {
width: 30vmin;
height: 30vmin;
animation-duration: 40s;
}

.jupiter-orbit {
width: 35vmin;
height: 35vmin;
animation-duration: 50s;
}

.saturn-orbit {
width: 40vmin;
height: 40vmin;
animation-duration: 60s;
}

.uranus-orbit {
width: 45vmin;
height: 45vmin;
animation-duration: 70s;
}

.neptune-orbit {
width: 50vmin;
height: 50vmin;
animation-duration: 80s;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 3vmin;
height: 3vmin;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
}

.mercury {
width: 1.2vmin;
height: 1.2vmin;
background-color: gray;
}

.venus {
width: 1.8vmin;
height: 1.8vmin;
background-color: orange;
}

.earth {
width: 2vmin;
height: 2vmin;
background-color: blue;
}

.mars {
width: 1.6vmin;
height: 1.6vmin;
background-color: red;
}

.jupiter {
width: 4vmin;
height: 4vmin;
background-color: orange;
}

.saturn {
width: 3.5vmin;
height: 3.5vmin;
background-color: lightgoldenrodyellow;
}

.uranus {
width: 3vmin;
height: 3vmin;
background-color: lightblue;
}

.neptune {
width: 2.8vmin;
height: 2.8vmin;
background-color: blue;
}

.label {
position: absolute;
top: 4vmin;
left: 50%;
transform: translateX(-50%);
font-size: 1.2vmin;
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(50%);
}
}

@keyframes twinkle {
0% { opacity: 0.8; }
50% { opacity: 0.4; }
100% { opacity: 0.8; }
}
JavaScript (script.js):
javascript
Copy code
document.addEventListener("DOMContentLoaded", () => {
const solarSystem = document.querySelector('.solar-system');
let angle = 0;

function animate() {
    angle += 0.1;
    solarSystem.style.transform = `rotateX(45deg) rotateZ(${angle}deg)`;
    requestAnimationFrame(animate);
}

animate();

});
Stars Background Image:
To create the twinkling star background, you need to download a star image and save it as stars.png in the same directory as your HTML and CSS files. You can use an image from a free resource or create one yourself.

This updated code makes the solar system responsive and adds twinkling stars in the background. Adjust the sizes, colors, and speeds as necessary to match your requirements.

JO WHITE PTLI SI LINE DIKH RHI HAI JO HAR PLANET K ORBIT KO DIKHA RHI HAI USE HATA DO
ChatGPT
Sure, we can remove the white lines representing the orbits. Here's the updated code with those lines removed:

HTML:
html
Copy code
<!DOCTYPE html>




Responsive 3D Solar System








Mercury




Venus




Earth




Mars




Jupiter




Saturn




Uranus




Neptune






CSS (styles.css):
css
Copy code
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
font-family: Arial, sans-serif;
overflow: hidden;
}

.stars {
position: absolute;
width: 100%;
height: 100%;
background: url('stars.png') repeat;
animation: twinkle 100s infinite;
}

.solar-system {
position: relative;
width: 80vmin;
height: 80vmin;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 10vmin;
height: 10vmin;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate linear infinite;
}

.mercury-orbit {
width: 15vmin;
height: 15vmin;
animation-duration: 10s;
}

.venus-orbit {
width: 20vmin;
height: 20vmin;
animation-duration: 20s;
}

.earth-orbit {
width: 25vmin;
height: 25vmin;
animation-duration: 30s;
}

.mars-orbit {
width: 30vmin;
height: 30vmin;
animation-duration: 40s;
}

.jupiter-orbit {
width: 35vmin;
height: 35vmin;
animation-duration: 50s;
}

.saturn-orbit {
width: 40vmin;
height: 40vmin;
animation-duration: 60s;
}

.uranus-orbit {
width: 45vmin;
height: 45vmin;
animation-duration: 70s;
}

.neptune-orbit {
width: 50vmin;
height: 50vmin;
animation-duration: 80s;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 3vmin;
height: 3vmin;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%) translateX(50%);
display: flex;
justify-content: center;
align-items: center;
}

.mercury {
width: 1.2vmin;
height: 1.2vmin;
background-color: gray;
}

.venus {
width: 1.8vmin;
height: 1.8vmin;
background-color: orange;
}

.earth {
width: 2vmin;
height: 2vmin;
background-color: blue;
}

.mars {
width: 1.6vmin;
height: 1.6vmin;
background-color: red;
}

.jupiter {
width: 4vmin;
height: 4vmin;
background-color: orange;
}

.saturn {
width: 3.5vmin;
height: 3.5vmin;
background-color: lightgoldenrodyellow;
}

.uranus {
width: 3vmin;
height: 3vmin;
background-color: lightblue;
}

.neptune {
width: 2.8vmin;
height: 2.8vmin;
background-color: blue;
}

.label {
position: absolute;
top: 4vmin;
left: 50%;
transform: translateX(-50%);
font-size: 1.2vmin;
white-space: nowrap;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(50%);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(50%);
}
}

@keyframes twinkle {
0% { opacity: 0.8; }
50% { opacity: 0.4; }
100% { opacity: 0.8; }
}
JavaScript (script.js):
javascript
Copy code
document.addEventListener("DOMContentLoaded", () => {
const solarSystem = document.querySelector('.solar-system');
let angle = 0;

function animate() {
    angle += 0.1;
    solarSystem.style.transform = `rotateX(45deg) rotateZ(${angle}deg)`;
    requestAnimationFrame(animate);
}

animate();

});
This updated code will create a responsive 3D solar system with twinkling stars in the background and no white lines representing the orbits.

make a caption for this project for linkdin

2/2

ChatGPT
Absolutely! Here's a LinkedIn caption for your project:

🚀🌌 Excited to share my latest project: A Responsive 3D Solar System Animation! 🌞🪐

Leveraging the power of HTML, CSS, and JavaScript, I've created an interactive, animated model of our solar system. Each planet orbits around the sun with its own unique speed, and labels are included to identify each one. The background features a stunning array of twinkling stars, adding to the immersive experience.

Key Features:
✨ Responsive Design
🌍 Realistic 3D Planetary Movement
🌟 Twinkling Star Background
📱 Optimized for All Devices

This project was an incredible learning experience, combining astronomy and web development to bring the wonders of our solar system to life.

Check it out on CodePen: [Your CodePen Link]

WebDevelopment #JavaScript #CSS #HTML #3DAnimation #ResponsiveDesign #SolarSystem #Astronomy #Coding #TechInnovation

Top comments (0)

Read next

ping_iman_72b37390ccd083e profile image

Security: BitPower's impeccable security

ping iman -

shrishti_srivastava_ profile image

DAY 6 PROJECT: POLL SYSTEM

Shrishti Srivastava -

dkuku profile image

Running Livebook as a Systemd Service for Your User

Daniel Kukula -

ejiroosiephri profile image

A guide into REACT AND SVELTE

Ejiro -