Minimal Solar System

Developer
Adam Grayson
Size
3,425 Kb
Views
8,096
  1. Minimal Solar System Previews
  2. Minimal Solar System HTML Codes
  3. Minimal Solar System CSS Codes
  4. Minimal Solar System JS Codes

How do I make an minimal solar system?

The speed at which the planets orbit the sun are accurate relative to each other, but the sizes of the planets and sun are not. What is a minimal solar system? How do you make a minimal solar system? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Minimal Solar System Previews
IQ Test

Minimal Solar System - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimal Solar System </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> .sun
.trackMercury .mercury
.trackVenus .venus
.trackEarth .earth
.trackMars .mars
.trackJupiter .jupiter
.trackSaturn .saturn
.trackUranus .uranus .trackNeptune .neptune <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Minimal Solar System - Script Codes CSS Codes

html, body { background: #000;
}
.trackMercury { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; width: 100px; height: 100px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 0.48s linear infinite; z-index: 8;
}
.trackMercury:hover { border: 1px solid #2682D5;
}
.trackVenus { position: absolute; top: 50%; left: 50%; margin: -62.5px 0 0 -62.5px; width: 125px; height: 125px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 1.24s linear infinite; z-index: 7;
}
.trackVenus:hover { border: 1px solid #2682D5;
}
.trackEarth { position: absolute; top: 50%; left: 50%; margin: -79px 0 0 -79px; width: 158px; height: 158px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 2s linear infinite; z-index: 6;
}
.trackEarth:hover { border: 1px solid #2682D5;
}
.trackMars { position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -95px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 3.76s linear infinite; z-index: 5;
}
.trackMars:hover { border: 1px solid #2682D5;
}
.trackJupiter { position: absolute; top: 50%; left: 50%; margin: -137.5px 0 0 -137.5px; width: 275px; height: 275px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 23.72s linear infinite; z-index: 4;
}
.trackJupiter:hover { border: 1px solid #2682D5;
}
.trackSaturn { position: absolute; top: 50%; left: 50%; margin: -205px 0 0 -205px; width: 410px; height: 410px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 58.92s linear infinite; z-index: 3;
}
.trackSaturn:hover { border: 1px solid #2682D5;
}
.trackUranus { position: absolute; top: 50%; left: 50%; margin: -255px 0 0 -255px; width: 510px; height: 510px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 168.02s linear infinite; z-index: 2;
}
.trackUranus:hover { border: 1px solid #2682D5;
}
.trackNeptune { position: absolute; top: 50%; left: 50%; margin: -290px 0 0 -290px; width: 580px; height: 580px; border-radius: 50%; border: 1px solid #161616; transition: all 0.5s; animation: rotate360 329.6s linear infinite; z-index: 1;
}
.trackNeptune:hover { border: 1px solid #2682D5;
}
.sun { position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; border-radius: 50%; background: yellow;
}
.mercury { position: absolute; top: 0; left: 50%; margin: -3px 0 0 -3px; width: 6px; height: 6px; border-radius: 50%; background: #c2b7a4;
}
.venus { position: absolute; top: 0; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; border-radius: 50%; background: #ede186;
}
.earth { position: absolute; top: 0; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; border-radius: 50%; background: #81b3d4;
}
.mars { position: absolute; top: 0; left: 50%; margin: -4px 0 0 -4px; width: 8px; height: 8px; border-radius: 50%; background: #d66523;
}
.jupiter { position: absolute; top: 0; left: 50%; margin: -32.5px 0 0 -32.5px; width: 65px; height: 65px; border-radius: 50%; background: #ea9e6a;
}
.saturn { position: absolute; top: 0; left: 50%; margin: -27.5px 0 0 -27.5px; width: 55px; height: 55px; border-radius: 50%; background: #e6d48b;
}
.uranus { position: absolute; top: 0; left: 50%; margin: -15px 0 0 -15px; width: 30px; height: 30px; border-radius: 50%; background: #82bdcb;
}
.neptune { position: absolute; top: 0; left: 50%; margin: -14px 0 0 -14px; width: 28px; height: 28px; border-radius: 50%; background: #5b7dad;
}
@keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Minimal Solar System - Script Codes JS Codes

(function() {
}).call(this);
Minimal Solar System - Script Codes
Minimal Solar System - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 4
Size 3,425 Kb
Views 8,096
Do you need developer help for Minimal Solar System?

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!

Adam Grayson (agrayson) Script Codes
Name
SVG Animation - Circle Fill
Playing Animations on Scroll
RPG Cooldown
HTML5 GeoLocation Example
Random Weapon Generator
Dungeon Crawler
Sliding Lines Animation
Centered background Image with hot spots
Circle Progression Plugin
Spinning Circles
Create amazing captions 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!