定义一个div 太阳轨道sunline，边框显示出来，定义position为relative

#sunline{

width: 500px;

height: 500px;

border:2px solid #000;

border-radius: 50%;

margin:50px auto;

position: relative;

animation:sunRotate 5s;

}

定义一个div 太阳sun，把红太阳放在中间，居中显示，定义position为absolute，

距左50%，剧上50%，左边距负的宽度的一半，上边距负的高度的一半

#sun{

background: red;

width: 150px;

height: 150px;

position: absolute;

left: 50%;

top:50%;

margin-left:-75px;

margin-top: -75px;

border-radius: 50%;

}

定义一个地球的轨道 earthline，边框显示出来，定义position为absolute，距左50%，剧上负的高度一半，左边距负的宽度的一半

#earthline{

width: 200px;

height: 200px;

border:1px solid #000;

border-radius: 50%;

position: absolute;

left: 50%;

top: -100px;

margin-left: -100px;

}

定义一个div 地球 earth，把地球放在水平居中，太阳轨道垂直地球居中，定义position为absolute，距左50%，剧上50%，左边距负的宽度的一半，上边距负的高度的一半

#earth{

background: green;

width: 100px;

height: 100px;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -50px;

top: 50%;

margin-top: -50px;

}

定义一个月球moon，定义position为absolute，距左50%，剧上负的高度一半，左边距负的宽度的一半

#moon{

width: 40px;

height: 40px;

background: blue;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -20px;

top: -20px;

}

定义动画@keyframes，100%的进度的时候，旋转一圈

@keyframes sunRotate{

100%{

transform:rotate(360deg);

}

}

为太阳轨道sunline绑定动画，使用属性animation，参数：规则名称，执行时间，速度曲线，延迟时间，播放次数，是否反向

animation:sunRotate 10s linear 0s infinite;

速度曲线： linear（线性匀速） ease（缓动）

播放次数：infinite（无限次数）

为地球轨道earthline绑定动画

animation:sunRotate 5s linear 0s infinite; 运行时间不一样，这个快

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style>

#sunline{

  width: 500px;

  height: 500px;

  border:2px solid #000;

  border-radius: 50%;

  margin:100px auto;

  position: relative;

  animation:sunRotate 10s linear 0s infinite;

}

#sun{

  background: red;

  width: 150px;

  height: 150px;

  position: absolute;

  left: 50%;

  top:50%;

  margin-left:-75px;

  margin-top: -75px;

  border-radius: 50%;

}

#earthline{

  width: 200px;

  height: 200px;

  border:1px solid #000;

  border-radius: 50%;

  position: absolute;

  left: 50%;

  top: -100px;

  margin-left: -100px;

  animation:sunRotate 5s linear 0s infinite;

}

#earth{

  background: green;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  position: absolute;

  left: 50%;

  margin-left: -50px;

  top: 50%;

  margin-top: -50px;

}

#moon{

  width: 40px;

  height: 40px;

  background: blue;

  border-radius: 50%;

  position: absolute;

  left: 50%;

  margin-left: -20px;

  top: -20px;

}

@keyframes sunRotate{

  100%{

    transform:rotate(360deg);

  }

}

</style>

</head>

<body>

<div id="sunline">

  <div id="sun"></div>

  <div id="earthline">

    <div id="earth"></div>

    <div id="moon"></div>

  </div>

</div>

</body>

</html>

[css3] 看博客学习别人的旋转的星球的更多相关文章

  1. [javaSE] 看博客学习多线程的创建方式和优劣比较和PHP多线程

    通过实现Runnable接口创建线程 获取Thread对象,new出来,构造函数参数:Runnable对象 Runnable是一个接口,定义一个类MyRunnable实现Runnable接口,实现ru ...

  2. [PHP] 看博客学习观察者模式

    具体应用场景是,当subject的某个动作需要引发一系列不同对象的动作(比如你是一个班长要去通知班里的某些人),与其一个一个的手动调用触发的方法(私下里一个一个通知),不如维护一个列表(建一个群),这 ...

  3. [PHP] 看博客学习插入排序

    定义数组长度变量$len,使用count()函数,参数:数组 for循环数组,条件:从第二个开始,遍历数组,循环内 定义临时变量$temp,赋值当前元素 for循环数组,条件:遍历当前元素前面的所有元 ...

  4. [android] 看博客学习hashCode()和equals()

    equals()是Object类提供的一个方法,众所周知,每一个java类都继承自Object,所以说每一个对象都有一个equals()方法,我们在用这个方法时却一般重写这个方法 Object类中eq ...

  5. [android] 看博客学习Android常见的几种RuntimeException

    异常分为两种: 1.编译时异常 当编译时异常抛出时,需要对其进行处理声明,否则编译不通过 2.运行时异常 编译时不检测,运行时 如果抛出,程序会立刻停止 NullPointerException 空指 ...

  6. [javaSE] 看博客学习java并发编程

    共享性 多线程操作同一个数据,产生线程安全问题 新建一个类ShareData 设计一个int 型的成员变量count 设计一个成员方法addCount(),把count变量++ 在main函数中开启多 ...

  7. android fragment 博客 学习记录

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和 ...

  8. FPGA一个博客学习

    FPGA一个博客学习 http://bbs.ednchina.com/BLOG_PERSONALCAT_100185_2001619.HTM

  9. EF6 Code First 博客学习记录

    学习一下ef6的用法 这个学习过程时按照微软官网的流程模拟了一下 就按照下面的顺序来写吧 1.连接数据库  自动生成数据库 2.数据库迁移 3.地理位置以及同步/异步处理(空了再补) 4.完全自动迁移 ...

随机推荐

  1. 尝试asp.net mvc 基于controller action 方式权限控制方案可行性(转载)

    微软在推出mvc框架不久,短短几年里,版本更新之快,真是大快人心,微软在这种优秀的框架上做了大量的精力投入,是值得赞同的,毕竟程序员驾驭在这种框架上,能够强力的精化代码,代码层次也更加优雅,扩展较为方 ...

  2. DOM LEVEL 1 中的那些事儿[总结篇-上]

    DOM是前端编程中一个非常重要的部分,我们在动态修改页面的样式.内容.添加页面动画以及为页面元素绑定事件时,本质都是在操作DOM.DOM并不是JS语言的一个部分,我们通过JAVA.PHP等语言抓取网页 ...

  3. Strust2总结

    1. JavaEE软件三层结构和MVC的区别? JavaEE软件三层机构是由sun公司提供JavaEE开发规范的:Web层(表现层).业务逻辑层.数据持久层.[其中WEB层会使用前端控制器模式] MV ...

  4. Git入门－－创建版本库，关联远程库，从远程库下载

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  5. 微服务 - Eureka注册中心

    我们来解决微服务的第一问题,服务的管理. 服务中心对外提供服务,需要对外暴露自己的地址.而consumer(调用者)需要记录服务提供者的地址.将来地址出现变更,还需要及时更新.这在服务较少的时候并不觉 ...

  6. Nginx安装使用及与tomcat实现负载均衡

    1. 背景 基于nginx强大的功能,实现一种负载均衡,或是不停机更新程序等.nginx相比大家基本上都知道是什么来头了,具体的文章大家可以去搜索相关文章学习阅读,或是可以查看Nginx中文文档和Ng ...

  7. Java调用HTTPS接口的证书配置

    首先需要获取到证书文件. 然后,将证书导入到本地: keytool -import -noprompt -trustcacerts -alias <AliasName> -file < ...

  8. Vue2.5 开发去哪儿网App

    Vue2.5开发去哪儿网App 技术栈和主要框架

  9. socket练习：FTP

    FTP 练习收获: 1,类型转换 2,进度条实现: 3,print 输出不换行的方法: print输出 不换行的方法: 方法一: import sys   sys.stdout.write(" ...

  10. Centos6.7配置Nginx+Tomcat简单整合

    系统环境:Centos 6.7 软件环境:JDK-1.8.0_65.Nginx-1.10.3.Tomcat-8.5.8 文档环境:/opt/app/ 存放软件目录,至于mkdir创建文件就不用再说了 ...