定义一个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 core 2 学习笔记(3) —— 静态文件

    这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

  2. [leetcode.com]算法题目 - Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. Linux巩固记录（4） 运行hadoop 2.7.4自带demo程序验证环境

    本节主要使用hadoop自带的程序运行demo来确认环境是否正常 1.首先创建一个input.txt文件,里面任意输入些单词,有部分重复单词 2.将input文件拷贝到hdfs 3.执行hadoop程 ...

  4. 【Spark算子】：reduceByKey、groupByKey和combineByKey

    在spark中,reduceByKey.groupByKey和combineByKey这三种算子用的较多,结合使用过程中的体会简单总结: 我的代码实践:https://github.com/wwcom ...

  5. pinnet 计算云分区

    fdisk /dev/xvdemne mnlEnterEnter 9G-98G-98G-478M-28G-28G-28G mw #设置文件格式mkfs -t ext4 /dev/xvde5mkfs - ...

  6. 两台linux主机使用unison + inotify实现web文件夹同步

    两台服务器同步数据 unison 是一款跨平台的文件同步对象,不仅支撑本地对本地同步,也支持通过SSH,RSH和Socket 等网络协议进行同步. unison 支持双向同步,你可以同A同步到B ,也 ...

  7. (转）Db2 数据库性能优化中，十个共性问题及难点的处理经验

    (转)https://mp.weixin.qq.com/s?__biz=MjM5NTk0MTM1Mw==&mid=2650629396&idx=1&sn=3ec17927b3d ...

  8. fastjson的JSONArray转化为泛型列表

    背景:一个复杂结构体内部可能有array的数据,例如:{name:"test",cities:[{name:"shanghai",area:1,code:200 ...

  9. 一、Linq简介

    语言集成查询Language Integrated Query(LINQ)是一系列将查询功能集成到C#语言的技术统称. 传统数据查询的缺点: 简单的字符串查询,没有编译时类型检查或Intellisen ...

  10. 小程序/js监听输入框验证金额

    refundAmoutInput: function(event){ var value = event.detail.value; if (value.split('.')[0].length &g ...