Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Spinning planet.</title> <styletype= "Text/css">. Box{Transform:Scale (0.5);position:relative;padding:1px;Height:300px;width:300px; }. 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%;Box-shadow:5px 5px 10px red, -5px-5px 10px red, 5px-5px 10px red, -5px 5px 10px Red; }. 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:Blue;Border-radius:50%; }. Moon{position:Absolute; Left:0;Top:50%;Height:20px;width:20px;margin:-10px 0 0-10px;Background-color:Black;Border-radius:50%; }@keyframes Rotate{100% {Transform:Rotate (360deg); } } </style></Head><Body><Divclass= "box"> <Divclass= "Sunline"> <Divclass= "Sun"></Div> <Divclass= "Earthline"> <Divclass= "Earth"></Div> <Divclass= "Moon"></Div> </Div> </Div></Div><Strong>"Brief Introduction"</Strong><P>The rotating planets are mainly implemented by the rotate () rotation function. In fact, the Blue Earth and the black Moon do not spin, just the visual rotation effect of their parent rotation.</P></Body></HTML>
：
Original link: https://www.cnblogs.com/xiaohuochai/p/5419236.html
CSS3 Animation (animation) Effect 2-Rotating Planet
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
