纯css模拟太阳地球月球公转与自转效果
代码语言:html
所属分类:动画
代码描述:纯css模拟太阳地球月球公转与自转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background: white; } div { box-sizing: border-box; } .solar-system { position: absolute; top: 0; left: 0; } .sun { position: absolute; top: 240px; left: 240px; width: 100px; height: 100px; background: yellow; border-radius: 100px; } .earth-circle { position: absolute; top: 65px; left: 65px; width: 450px; height: 450px; content: ""; border: 1px solid #ccc; border-radius: 300px; } .earth { position: absolute; top: 40px; left: 260px; width: 50px; height: 50px; background: green; border-radius: 100px; animation: 16.5s rot linear infinite; transform-origin: 30px 250px; } .moon-circle { position:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0