Earth animation

Developer
Szymon Dziewoński
Size
1,991 Kb
Views
10,120
  1. Earth animation Previews
  2. Earth animation HTML Codes
  3. Earth animation CSS Codes

How do I make an earth animation?

Animation earth in css with usting transforms. What is a earth animation? How do you make a earth animation? This script and codes were developed by Szymon Dziewoński on 23 December 2022, Friday.

Earth animation Previews
IQ Test

Earth animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>earth animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div id="outerCircle"> <div class="parallel one"></div> <div class="parallel two"></div> <div class="parallel mid one"></div> <div class="parallel mid two"></div> <div class="wrapperMeridian one">	<div class="meridian"></div> </div> <div class="equator"></div> <div class="wrapperMeridian two">	<div class="meridian"></div> </div> <div class="moon"><span></span></div>	</div> <div class="elipse"></div>
</div>
</body>
</html>

Earth animation - Script Codes CSS Codes

*{ margin: 0; padding: 0;
}
body{ background-color: #344595;
}
.wrapper{ width: 180px; height: 180px; margin: 20px auto;
}
#outerCircle{ width: 120px; height: 120px; border-radius: 60px; border: 1px solid #fff; margin: 30px;
}
.equator{ width: 114px; height: 114px; border: 3px solid #fff; border-radius: 50%; -webkit-transform:rotateX(105deg);
}
.parallel{ width: 80px; height: 80px; border: 3px solid #fff; border-radius: 50%; -webkit-transform:rotateX(105deg); position: absolute;
}
.parallel.one{ height: 50px; margin: -11px 0 0 17px;
}
.parallel.two{ margin: 59px 0 0 16px;
}
.parallel.mid{ width: 108px; height: 100px; border: 3px solid #fff;
}
.parallel.mid.one{ height: 80px; margin: -2px 0 0 3px
}
.parallel.mid.two{ margin: 30px 0 0 3px;
}
.wrapperMeridian.one{ -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite;
}
.wrapperMeridian.one .meridian{ width: 120px; height: 120px; position: absolute; border: 3px solid #fff; border-radius: 50%; margin: -3px 0 0 -3px;
}
.wrapperMeridian.two{ -webkit-animation:spin 3s linear 0.7s infinite; -moz-animation:spin 3s linear 0.7s infinite; animation:spin 3s linear 0.7s infinite; position: relative; width: 120px; height: 120px; margin-top: -120px;
}
.wrapperMeridian.two .meridian{ width: 120px; height: 120px; position: absolute; border: 3px solid #fff; border-radius: 50%; margin: -3px 0 0 -3px;
}
.moon{ width: 120px; height: 120px; margin-top: -120px; position: absolute; -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite;
}
.moon span{ display: block; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; position: absolute; right: -100px;
}
@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); }
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotateY(360deg);	transform:rotateY(360deg); }
}
Earth animation - Script Codes
Earth animation - Script Codes
Home Page Home
Developer Szymon Dziewoński
Username SzymonDziewonski
Uploaded December 23, 2022
Rating 3
Size 1,991 Kb
Views 10,120
Do you need developer help for Earth 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!

Szymon Dziewoński (SzymonDziewonski) Script Codes
Name
Simple loader
Social Icons net animation
Hover button
Svg animation draw
Vertical-align
Animated logo
Hover effect
Menu with hover slide effect
Random count
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!