Solar System - WIP
How do I make an solar system - wip?
What is a solar system - wip? How do you make a solar system - wip? This script and codes were developed by David Bellotti on 30 October 2022, Sunday.
Solar System - WIP Previews
Solar System - WIP - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solar System - WIP</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="solar-system"> <div class="star sun"></div> <div class="planet mercury"></div> <div class="planet venus"></div> <div class="planet earth"></div> <div class="planet mars"></div> <div class="planet jupiter"></div> <div class="planet saturn"></div> <div class="planet uranus"></div> <div class="planet neptune"></div> <div class="planet pluto"></div>
</div>
</body>
</html>
Solar System - WIP - Script Codes CSS Codes
@-webkit-keyframes rotate { from { -webkit-transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); }
}
@keyframes rotate { from { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
.mercury { -webkit-animation: rotate 22s linear infinite; animation: rotate 22s linear infinite;
}
.mercury:before { -webkit-transform: translateY(295px); transform: translateY(295px);
}
.venus { -webkit-animation: rotate 56s linear infinite; animation: rotate 56s linear infinite;
}
.venus:before { -webkit-transform: translateY(300px); transform: translateY(300px);
}
.earth { -webkit-animation: rotate 91s linear infinite; animation: rotate 91s linear infinite;
}
.earth:before { -webkit-transform: translateY(306px); transform: translateY(306px);
}
.mars { -webkit-animation: rotate 172s linear infinite; animation: rotate 172s linear infinite;
}
.mars:before { -webkit-transform: translateY(317px); transform: translateY(317px);
}
.jupiter { -webkit-animation: rotate 1082s linear infinite; animation: rotate 1082s linear infinite;
}
.jupiter:before { -webkit-transform: translateY(394px); transform: translateY(394px);
}
.saturn { -webkit-animation: rotate 2688s linear infinite; animation: rotate 2688s linear infinite;
}
.saturn:before { -webkit-transform: translateY(496px); transform: translateY(496px);
}
.uranus { -webkit-animation: rotate 7672s linear infinite; animation: rotate 7672s linear infinite;
}
.uranus:before { -webkit-transform: translateY(706px); transform: translateY(706px);
}
.neptune { -webkit-animation: rotate 15038s linear infinite; animation: rotate 15038s linear infinite;
}
.neptune:before { -webkit-transform: translateY(923px); transform: translateY(923px);
}
.pluto { -webkit-animation: rotate 22603s linear infinite; animation: rotate 22603s linear infinite;
}
.pluto:before { -webkit-transform: translateY(1321px); transform: translateY(1321px);
}
.sun:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: gold; content: ''; display: block; height: 570px; width: 570px;
}
.mercury:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: brown; content: ''; display: block; height: 2px; width: 2px;
}
.venus:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: teal; content: ''; display: block; height: 5px; width: 5px;
}
.earth:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: blue; content: ''; display: block; height: 5px; width: 5px;
}
.mars:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: red; content: ''; display: block; height: 3px; width: 3px;
}
.jupiter:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: orange; content: ''; display: block; height: 59px; width: 59px;
}
.saturn:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: orange; content: ''; display: block; height: 49px; width: 49px;
}
.uranus:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: blue; content: ''; display: block; height: 21px; width: 21px;
}
.neptune:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: blue; content: ''; display: block; height: 20px; width: 20px;
}
.pluto:before { background-color: rgba(255, 255, 220, 0.2); background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: -webkit-linear-gradient(135deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); background-image: linear-gradient(-45deg,rgba(255, 255, 220, 0.2) 0%, transparent 100%); box-shadow: inset -25px -25px 40px rgba(0, 0, 0, 0.5); border-radius: 50%; background-color: gray; content: ''; display: block; height: 0px; width: 0px;
}
.star:before,
.planet:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto;
}
.solar-system { height: 100vh; width: 100vw;
}
body { background-color: black;
}
| Developer | David Bellotti |
| Username | dbellotti |
| Uploaded | October 30, 2022 |
| Rating | 3 |
| Size | 3,510 Kb |
| Views | 10,120 |
Do you need developer help for Solar System - WIP?
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!
David Bellotti (dbellotti) Script Codes
| Name | Size |
| Chromatic Depth | 2,301 Kb |
| Arora | 10,447 Kb |
| Combinator | 2,193 Kb |
| Messier 74 - WIP | 6,599 Kb |
| Cosmic Crane -WIP | 3,578 Kb |
| Multi range slider with gradient | 2,909 Kb |
| CreativeBrains play | 4,188 Kb |
| Centered Box | 1,893 Kb |
| Galaxy | 2,889 Kb |
| Material Floating Input Label | 2,915 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| Process Accordion | Devilskitchen | 31,432 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
| Learning FlexBox | Alex_rodrigues | 2,821 Kb |
| Sketchy Box | Mnicpt | 3,033 Kb |
| CSS Link Zoom On Click | Bryce | 1,960 Kb |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Tic Tac Toe | Volv | 4,862 Kb |
Do you want hide your ip address?
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!