Earth Orbit

Developer
Sindhuja
Size
2,120 Kb
Views
44,528
  1. Earth Orbit Previews
  2. Earth Orbit HTML Codes
  3. Earth Orbit CSS Codes

How do I make an earth orbit?

This is an animated pen modeling the earth orbiting the sun. This was made using only HTML and CSS.. What is a earth orbit? How do you make a earth orbit? This script and codes were developed by Sindhuja on 14 September 2022, Wednesday.

Earth Orbit Previews
IQ Test

Earth Orbit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Earth Orbit</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Right below is an image of the sun --> <img id="sun" src="https://goo.gl/dEEssP"> <!-- Insert the 'earth' on the next line --> <div id = "earth-orbit"> <img id= "earth" src="http://www.happycow.net/blog/wp-content/uploads/2012/05/Earth.jpg"> </div> </body>
</html>
</body>
</html>

Earth Orbit - Script Codes CSS Codes

html{ /* The universe takes up all available space */ width: 100%; height: 100%; /* The universe is black */ background-image: url("http://upload.wikimedia.org/wikipedia/commons/d/d7/Carina_Dwarf_Galaxy.jpg");
}
#sun { position: absolute; /* Positions the top-left corner of the image to be * /* in the middle of the box */ top: 50%; left: 50%; /* Play with these numbers to see what it does */ height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; border-color: orange; border-width: 2px; border-radius: 50%; box-shadow: 0 0 64px yellow;
}
#earth { /* Style your earth */ position:absolute; top:0; left:50%; width:100px; hieght:100px; margin-left: -25px; margin-top:-25px;
}
#earth-orbit { /* For Section #2 */ position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin-top: -250px; margin-left: -250px; border-width: 2px; border-style: dotted; border-color: white; border-radius: 50%; -webkit-animation: spin-right 10s linear infinite; -moz-animation: spin-right 10s linear infinite; -ms-animation: spin-right 10s linear infinite; -o-animation: spin-right 10s linear infinite; animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin-right { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
Earth Orbit - Script Codes
Earth Orbit - Script Codes
Home Page Home
Developer Sindhuja
Username SindhujaD
Uploaded September 14, 2022
Rating 3
Size 2,120 Kb
Views 44,528
Do you need developer help for Earth Orbit?

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!

Sindhuja (SindhujaD) Script Codes
Name
Rock, Paper, Scissors
A Pen by Sindhuja
SVG Animation
Mobile Email Wireframe
Google Redisign
Pizza Order Form
Minimal SVG Animation
Anais Nin Quote Typography
SVG Fill Animation
Website
Create amazing blog posts 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!