纯css实现太阳系行星旋转动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现太阳系行星旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /** * I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets * are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate * Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go * building one in pure CSS. * * Many thanks to @aidandore and @iandevlin too for suggestions and improvements * * Chin up Pluto. You'll always be a planet to me... * * Tady: http://tady.me * @tadywankenobi */ /** * Move in a circle without wrapper elements * Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me! */ body { background-color: #012; background-size: 33%; background-repeat: repeat; min-height: 2025px; } .system { position: relative; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(0.75); transform: scale(0.75); } .sun { width: 144px; height: 144px; border-radius: 72px; position: absolute; top: 1066.6666666667px; left: 50%; margin: -72px; background-image: url("data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0