纯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