Home > Developer > Web Develop
Pure play, as if there is no actual eggs, but, pure play can not buy fooled, pure play can not buy deceived ...
Moon rotation of a CSS effect, boring play, you can copy to Notepad try
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>css geocentric Rotation Effect </title>
<style>
. box
{
Transform:scale (0.5);
position:relative;
padding:1px;
height:300px;
width:300px;
margin:100px Auto;
}
. Sunline
{
position:relative;
height:400px;
width:400px;
BORDER:2PX solid black;
border-radius:50%;
margin:50px 0 0 50px;
Display:flex;
Animation:rotate 10s infinite linear;
}
. Sun
{
height:100px;
width:100px;
Margin:auto;
background-color:red;
border-radius:50%;
}
. earthline
{
Position:absolute;
right:0;
top:50%;
height:200px;
width:200px;
Margin: -100px-100px 0 0;
BORDER:1PX solid black;
border-radius:50%;
Display:flex;
animation:rotate 2s infinite linear;
}
. Earth
{
Margin:auto;
height:50px;
width:50px;
Background-color:green;
border-radius:50%;
}
. Moon
{
Position:absolute;
left:0;
top:50%;
height:20px;
width:20px;
Margin: -10px 0 0-10px;
Background-color:gray;
border-radius:50%;
}
@keyframes Rotate
{
100%{transform:rotate (360DEG);
}
}
</style>
<body>
<!--code section BEGIN--
<div class= "box" >
<div class= "Sunline" >
<div class= "Sun" ></div>
<div class= "Earthline" >
<div class= "Earth" ></div>
<div class= "Moon" ></div>
</div>
</div>
</div>
<!--code section end--
</body>
CSS Sun Moon Earth triangle love rotation effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
