CSS Solar system animation

Developer
Tom Hermans
Size
2,390 Kb
Views
4,048
  1. CSS Solar system animation Previews
  2. CSS Solar system animation HTML Codes
  3. CSS Solar system animation CSS Codes

How do I make an css solar system animation?

From demo http://androidcss.com/css/pure-css-solar-system-glowing-sun-center/. What is a css solar system animation? How do you make a css solar system animation? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

CSS Solar system animation Previews
IQ Test

CSS Solar system animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Solar system animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="solar-system">
<div id="neptune-circle">
</div>
<div id="uranus-circle">
</div>
<div id="saturn-circle">
</div>
<div id="jupiter-circle">
</div>
<div id="mars-circle">
</div>
<div id="earth-circle">
</div>
<div id="venus-circle">
</div>
<div id="mercury-circle">
</div>
<div id="sun">
</div>
</div>
</body>
</html>

CSS Solar system animation - Script Codes CSS Codes

body{	background-color:#000;	margin-top:50px;	background-image:	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 10px),	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 10px),	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 10px);	background-size: 550px 550px,430px 430px,230px 230px;	background-position: 500px 2000px,400px 600px,400px 200px;
}
#solar-system{	position:relative;	margin:auto;	width:600px;	height:600px;	overflow:hidden;	padding:50px;
}
#neptune-circle{	position:absolute;	width:600px;	height:600px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	animation: rotation 70s linear infinite;
}
#neptune-circle:after{	position:absolute;	width:10px;	height:7px;	border-radius:100%;	background-color:#00F;	border-color:#00009B;	border-style:solid;	border-width: 4px 1px 1px 1px;	content:'';	left:300px;	top:-5px;
}
#uranus-circle{	position:absolute;	width:530px;	height:530px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:85px;	top:85px;	animation: rotation 60s linear infinite;
}
#uranus-circle:after{	position:absolute;	width:12px;	height:9px;	border-radius:100%;	border-color:#005353;	border-style:solid;	border-width: 4px 1px 1px 1px;	background-color:#00B9B9;	content:'';	left:265px;	top:-7px;
}
#saturn-circle{	position:absolute;	width:460px;	height:460px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:120px;	top:120px;	animation: rotation 50s linear infinite;
}
#saturn-circle:before{	position:absolute;	width:13px;	height:9px;	border-radius:100%;	background-color:#C0C0C0;	border-color:#838383;	border-style:solid;	border-width: 5px 1px 1px 1px;	content:'';	left:230px;	top:-6px;
}
#saturn-circle:after{	position:absolute;	width:25px;	height:5px;	border-radius:100%;	background-color:rgba(0,0,0,0);	border-color:#838383;	border-style:solid;	border-width: 1px 1px 3px 1px;	content:'';	left:224px;	top:-2px;
}
#jupiter-circle{	position:absolute;	width:360px;	height:360px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:170px;	top:170px;	animation: rotation 40s linear infinite;
}
#jupiter-circle:after{	position:absolute;	width:20px;	height:15px;	border-radius:100%;	background-color:#F60;	border-color:#630;	border-style:solid;	border-width: 6px 1px 1px 1px;	content:'';	left:170px;	top:-10px;
}
#mars-circle{	position:absolute;	width:200px;	height:200px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:250px;	top:250px;	animation: rotation 30s linear infinite;
}
#mars-circle:after{	position:absolute;	width:8px;	height:6px;	border-radius:100%;	background-color:#B00000;	border-color:#600;	border-style:solid;	border-width: 3px 1px 1px 1px;	content:'';	left:100px;	top:-5px;
}
#earth-circle{	position:absolute;	width:150px;	height:150px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:275px;	top:275px;	animation: rotation 20s linear infinite;
}
#earth-circle:before{	position:absolute;	width:4px;	height:4px;	border-radius:100%;	background-color:#CCC;	content:'';	left:66px;	top:-2px;	transform-origin:15px;	animation: rotation 2s linear infinite;
}
#earth-circle:after{	position:absolute;	width:8px;	height:6px;	border-radius:100%;	background-color:#0058B0;	border-color:#00366C;	border-style:solid;	border-width: 3px 1px 1px 1px;	content:'';	left:75px;	top:-5px;
}
#venus-circle{	position:absolute;	width:100px;	height:100px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:300px;	top:300px;	animation: rotation 10s linear infinite;
}
#venus-circle:after{	position:absolute;	width:9px;	height:6px;	border-radius:100%;	background-color:#FFD3A8;	border-color:#FFA579;	border-style:solid;	border-width: 4px 1px 1px 1px;	content:'';	left:50px;	top:-6px;
}
#mercury-circle{	position:absolute;	width:70px;	height:70px;	background-color:rgba(0,0,0,0);	border: 1px solid #111;	border-radius:100%;	left:315px;	top:315px;	animation: rotation 5s linear infinite;
}
#mercury-circle:after{	position:absolute;	width:5px;	height:4px;	border-radius:100%;	background-color:#713800;	border-color:#623100;	border-style:solid;	border-width: 2px 1px 1px 1px;	content:'';	left:35px;	top:-3px;
}
#sun{	position:absolute;	width:40px;	height:40px;	background-color:#F90;	border-radius:100%;	left:330px;	top:330px;	background:radial-gradient(circle, #F60, #FC0);	box-shadow:0px 0px 50px #F90;	animation: sun-shadow 2s ease infinite;
}
@keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(-360deg);}
}
@keyframes sun-shadow { 0% {box-shadow:0px 0px 20px #F90;} 50% {box-shadow:0px 0px 50px #F90;} 100% {box-shadow:0px 0px 20px #F90;}
}
CSS Solar system animation - Script Codes
CSS Solar system animation - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 2,390 Kb
Views 4,048
Do you need developer help for CSS Solar system animation?

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!

Tom Hermans (tomhermans) Script Codes
Name
Responsive Form
Portfolio box
Tryout
Styled selectbox
Imagemap pure css trial
StickyNav
Media object module
Table Row Toggle
Text in circle
Accessibility wai-aria test
Create amazing web content 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!