Earth and Mars Rotation Animation By HTML, CSS
HTML
<!doctype html><html>
<head>
<title> Earth Rotation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="planet planetEarth">
<h2> <font color="red">Earth</font></h2>
<div class="container">
<div class="loader"><span></span></div>
<div class="earth"></div>
</div>
</div>
<div class="planet planetMars">
<h2> <font color="red">Mars</font></h2>
<div class="container">
<div class="loader"><span></span></div>
<div class="mars"></div>
</div>
</div>
<div class="Hello">
<div class="container">
<p style="padding:5px;font-size:30px;line-height:1.5;">
<font color="white">The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly.Of the objects that orbit the Sun directly, the largest are the eight planets,with the remainder being smaller objects, the dwarf planets and small Solar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury. </p>
<p style="padding:5px;font-size:30px;line-height:1.5;">
<font color="white">The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with the majority of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus, Earth and Mars, are terrestrial planets, being primarily composed of rock and metal. The four outer planets are giant planets, being substantially more massive than the terrestrials. </p>
<p style="padding:5px;font-size:30px;line-height:1.5;">
<font color="white">The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium; the two outermost planets, Uranus and Neptune, are ice giants, being composed mostly of substances with relatively high melting points compared with hydrogen and helium, called volatiles, such as water, ammonia and methane. All eight planets have almost circular orbits that lie within a nearly flat disc called the ecliptic. </p>
<h2 style="font-size=30px;padding-center:5px;"> <font color="white">List of planets in our Solar System</h2>
<ul style="font-size:24px;">
<li>Murcury, Venus</li>
<li>Earth, Mars</li>
<li>Jupiter, Saturn</li>
<li>Uranus, Neptune</li>
</ul></font>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body
{
display: flex;
justify-content: left;
align-items: left;
min-height: 50vh;
overflow: hidden;
}
.planet
{
display: flex;
flex-direction: column;
}
.planet h2
{
color: #fff;
font-size: 4em;
margin-bottom: 40px;
font-weight: 600;
}
.planet .container
{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-box-reflect: below 1px linear-gradient(#0001,#0002);
}
.planetEarth
{
position: relative;
min-width: 50%;
height: 100vh;
justify-content: center;
align-items: center;
background: #182357;
}
.planetEarth .loader
{
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
animation: animate 4s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.planetEarth .loader:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient( to top, transparent, rgba(0,255,249,0.4));
background-size: 200px 360px;
background-repeat: no-repeat;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.planetEarth .loader:after
{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: #00fff9;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00fff9,
0 0 20px #00fff9,
0 0 30px #00fff9,
0 0 40px #00fff9,
0 0 50px #00fff9,
0 0 60px #00fff9,
0 0 70px #00fff9
0 0 80px #00fff9,
0 0 90px #00fff9,
0 0 100px #00fff9;
}
.planetEarth .loader span
{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #182357;
border-radius: 50%;
}
.earth
{
position: absolute;
width: 500px;
height: 500px;
background: url(earth.jpg);
border-radius: 50%;
background-size: cover;
box-shadow: inset 0 0 20px #03a9f4,
0 0 120px #03a9f4;
animation: animateEarth 15s linear infinite;
}
@keyframes animateEarth
{
0%
{
background-position: 0;
}
100%
{
background-position: 162.5%;
}
}
.planetMars
{
position: relative;
min-width: 50%;
height: 100vh;
justify-content: center;
align-items: center;
background: #190703;
}
.planetMars .loader
{
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
animation: animate 4s linear infinite;
animation-delay: -2s;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.planetMars .loader:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient( to top, transparent, rgba(255,87,34,0.4));
background-size: 200px 360px;
background-repeat: no-repeat;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.planetMars .loader:after
{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: #ff5722;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #ff5722,
0 0 20px #ff5722,
0 0 30px #ff5722,
0 0 40px #ff5722,
0 0 50px #ff5722,
0 0 60px #ff5722,
0 0 70px #ff5722
0 0 80px #ff5722,
0 0 90px #ff5722,
0 0 100px #ff5722;
}
.planetMars .loader span
{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #190703;
border-radius: 50%;
}
.mars
{
position: absolute;
width: 500px;
height: 500px;
background: url(mars.jpg);
border-radius: 50%;
background-size: cover;
box-shadow: inset 0 0 20px #ff5722,
0 0 120px #ff5722;
animation: mars 6s linear infinite;
}
@keyframes mars
{
0%
{
background-position: 0;
}
100%
{
background-position: -340px;
}
}
.Hello
{
position: absolute;
top: 20px;
left: 80px;
width: 1400px;
height: 1400px;
border-radius: 50%;
background-size: cover;
}
OUTPUT
Posts
46 Comments
Good guys
ReplyDeleteVery interesting
Wow amazing
ReplyDeleteVery nice
ReplyDeleteWow
ReplyDeleteGreat
Nice Rotating Earth
ReplyDeleteMind Blowing
ReplyDeleteLovely
ReplyDeleteKallu
ReplyDeleteVery good
Awesome
ReplyDeleteGazab
ReplyDeleteSuperb Work
ReplyDeleteUnbelievable
ReplyDeletePerfect 👌
ReplyDeleteWonderful
High Quality
ReplyDeletebrilliantly work
ReplyDeleteSuperb quality
ReplyDeleteUnique Work
ReplyDeleteSuper
ReplyDeletePerfect
ReplyDeleteWonderful
ReplyDeleteNice
ReplyDeleteWonderful
Fantastic
ReplyDeleteMore Attractive
ReplyDeleteAwesome Wonderful
ReplyDeleteLovely
ReplyDeleteAmazing Work Guys
ReplyDeleteAwesome
ReplyDeleteExcellent
Unique work
ReplyDeleteFantastic
ReplyDeleteNice Animation
ReplyDeleteFantastic Animation
ReplyDeleteWow 😲😲😲
ReplyDelete👌👌👌👌
Very Interesting
ReplyDeleteFantastic
ReplyDeletewow very interesting and interesting and interesting
ReplyDeleteVery Attractive and very nice
ReplyDeleteAwesome
ReplyDeleteGreat guys
ReplyDeleteSuperb and great job
ReplyDeleteBrilliant
ReplyDeleteexcellent job
ReplyDeleteAwesome
ReplyDeleteSuperb work done
ReplyDeleteWow Wonderful
ReplyDeleteAmazing creation
ReplyDeleteWow Great
ReplyDelete