Solar System
How do I make an solar system?
A simple solar system rotation using animation and transform.. What is a solar system? How do you make a solar system? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.
Solar System - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solar System</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="solar-wrapper"> <div id="sun"></div> <div id="mercury-orbit"> <div id="mercury"></div> </div> <div id="venus-orbit"> <div id="venus"></div> </div> <div id="earth-orbit"> <div id="earth"></div> <div id="moon-orbit"> <div id="moon"></div> </div> </div> <div id="mars-orbit"> <div id="mars"></div> <div class="mars-moon-orbit-1"> <div class="mars-moon"></div> </div> <div class="mars-moon-orbit-2"> <div class="mars-moon"></div> </div> </div> <div id="jupiter-orbit"> <div id="jupiter"></div> <div id="jupiter-spot"></div> </div> <div id="saturn-orbit"> <div id="saturn"> <div id="ring"></div> </div> </div> <div id="uranus-orbit"> <div id="uranus"></div> </div> <div id="neptune-orbit"> <div id="neptune"></div> </div>
</div>
</body>
</html>
Solar System - Script Codes CSS Codes
/** * Keyframes. */
@-webkit-keyframes rotation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/** * Begin styling. */
body { background-color: #000;
}
#solar-wrapper { height: 100%; overflow: hidden; left: 0; position: absolute; top: 0; width: 100%;
}
#sun { background-color: #aa0; height: 50px; left: calc(50% - 25px); position: absolute; top: calc(50% - 25px); width: 50px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 10px 2px #a50; -webkit-box-shadow: 0 0 10px 2px #a50; box-shadow: 0 0 10px 2px #a50;
}
#mercury-orbit { -webkit-animation: rotation 8s linear infinite; animation: rotation 8s linear infinite; height: 10%; left: 45%; position: absolute; top: 45%; width: 10%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
#mercury { background: #953; height: 10px; width: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 5px 1px #222; -webkit-box-shadow: inset 0 0 5px 1px #222; box-shadow: inset 0 0 5px 1px #222;
}
#venus-orbit { -webkit-animation: rotation 16s linear infinite; animation: rotation 16s linear infinite; height: 14%; left: 43%; position: absolute; top: 43%; width: 14%;
}
#venus { background: #db5; height: 15px; width: 15px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 3px 0 #ff8; -webkit-box-shadow: 0 0 3px 0 #ff8; box-shadow: 0 0 3px 0 #ff8;
}
#earth-orbit { -webkit-animation: rotation 24s linear infinite; animation: rotation 24s linear infinite; height: 20%; left: 40%; position: absolute; top: 40%; width: 20%;
}
#earth { background-color: #0bf; height: 20px; width: 20px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 4px 1px #fff; -webkit-box-shadow: 0 0 4px 1px #fff; box-shadow: 0 0 4px 1px #fff;
}
#moon-orbit { -webkit-animation: rotation 6s linear infinite; animation: rotation 6s linear infinite; height: 30px; left: -5px; position: absolute; top: -5px; width: 30px;
}
#moon { background-color: #aaa; height: 5px; width: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
#mars-orbit { -webkit-animation: rotation 44s linear infinite; animation: rotation 44s linear infinite; height: 30%; left: 35%; position: absolute; top: 35%; width: 30%;
}
#mars { background-color: #833; height: 18px; width: 18px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 5px #200; -webkit-box-shadow: inset 0 0 5px #200; box-shadow: inset 0 0 5px #200;
}
.mars-moon-orbit-1 { -webkit-animation: rotation 5s linear infinite; animation: rotation 5s linear infinite; height: 40px; left: -3px; position: absolute; top: -3px; width: 40px;
}
.mars-moon-orbit-2 { -webkit-animation: rotation 4s linear infinite; animation: rotation 4s linear infinite; height: 30px; left: -10px; position: absolute; top: -10px; width: 30px;
}
.mars-moon { background-color: #dbc; height: 3px; width: 3px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
#jupiter-orbit { -webkit-animation: rotation 68s linear infinite; animation: rotation 68s linear infinite; height: 40%; left: 30%; position: absolute; top: 30%; width: 40%;
}
#jupiter { background-color: #ffa500; height: 40px; width: 40px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 10px 1px #000; -webkit-box-shadow: inset 0 0 10px 1px #000; box-shadow: inset 0 0 10px 1px #000;
}
#jupiter-spot { background-color: rgba(160, 0, 0, 0.5); height: 6px; left: 20px; position: absolute; top: 22px; width: 12px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 5px 0 #900; -webkit-box-shadow: 0 0 5px 0 #900; box-shadow: 0 0 5px 0 #900;
}
#saturn-orbit { -webkit-animation: rotation 80s linear infinite; animation: rotation 80s linear infinite; height: 48%; left: 26%; position: absolute; top: 26%; width: 48%;
}
#saturn { background-color: #ab5; height: 36px; width: 36px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 5px #451; -webkit-box-shadow: inset 0 0 5px #451; box-shadow: inset 0 0 5px #451;
}
#ring { height: 10px; left: -10px; position: absolute; top: 10px; width: 55px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0px 2px 0 4px #ab5, 0 7px 2px 1px #000; -webkit-box-shadow: 0px 2px 0 4px #ab5, 0 7px 2px 1px #000; box-shadow: 0px 2px 0 4px #ab5, 0 7px 2px 1px #000;
}
#uranus-orbit { -webkit-animation: rotation 100s linear infinite; animation: rotation 100s linear infinite; height: 60%; left: 20%; position: absolute; top: 20%; width: 60%;
}
#uranus { background-color: #3da; height: 30px; width: 30px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 5px #451; -webkit-box-shadow: inset 0 0 5px #451; box-shadow: inset 0 0 5px #451;
}
#neptune-orbit { -webkit-animation: rotation 120s linear infinite; animation: rotation 120s linear infinite; height: 70%; left: 15%; position: absolute; top: 15%; width: 70%;
}
#neptune { background-color: #05a; height: 32px; width: 32px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 10px 1px #000; -webkit-box-shadow: inset 0 0 10px 1px #000; box-shadow: inset 0 0 10px 1px #000;
}
Developer | Bryan Jones |
Username | bartuc |
Uploaded | July 13, 2022 |
Rating | 4 |
Size | 3,454 Kb |
Views | 58,696 |
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 |
Loader | 2,367 Kb |
Universe Zoom | 3,574 Kb |
Cabin | 4,413 Kb |
Books | 5,030 Kb |
Vermhole | 6,053 Kb |
Lightbulb | 2,833 Kb |
See the Truth | 3,488 Kb |
Atom | 3,816 Kb |
Planets | 2,959 Kb |
Earth Clock | 5,611 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 |
Magnus 3 | ARocketfish | 7,944 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
React TODO | Enieste | 3,320 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 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!