[css3] 看博客学习别人的旋转的星球
定义一个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] 看博客学习别人的旋转的星球的更多相关文章
- [javaSE] 看博客学习多线程的创建方式和优劣比较和PHP多线程
通过实现Runnable接口创建线程 获取Thread对象,new出来,构造函数参数:Runnable对象 Runnable是一个接口,定义一个类MyRunnable实现Runnable接口,实现ru ...
- [PHP] 看博客学习观察者模式
具体应用场景是,当subject的某个动作需要引发一系列不同对象的动作(比如你是一个班长要去通知班里的某些人),与其一个一个的手动调用触发的方法(私下里一个一个通知),不如维护一个列表(建一个群),这 ...
- [PHP] 看博客学习插入排序
定义数组长度变量$len,使用count()函数,参数:数组 for循环数组,条件:从第二个开始,遍历数组,循环内 定义临时变量$temp,赋值当前元素 for循环数组,条件:遍历当前元素前面的所有元 ...
- [android] 看博客学习hashCode()和equals()
equals()是Object类提供的一个方法,众所周知,每一个java类都继承自Object,所以说每一个对象都有一个equals()方法,我们在用这个方法时却一般重写这个方法 Object类中eq ...
- [android] 看博客学习Android常见的几种RuntimeException
异常分为两种: 1.编译时异常 当编译时异常抛出时,需要对其进行处理声明,否则编译不通过 2.运行时异常 编译时不检测,运行时 如果抛出,程序会立刻停止 NullPointerException 空指 ...
- [javaSE] 看博客学习java并发编程
共享性 多线程操作同一个数据,产生线程安全问题 新建一个类ShareData 设计一个int 型的成员变量count 设计一个成员方法addCount(),把count变量++ 在main函数中开启多 ...
- android fragment 博客 学习记录
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和 ...
- FPGA一个博客学习
FPGA一个博客学习 http://bbs.ednchina.com/BLOG_PERSONALCAT_100185_2001619.HTM
- EF6 Code First 博客学习记录
学习一下ef6的用法 这个学习过程时按照微软官网的流程模拟了一下 就按照下面的顺序来写吧 1.连接数据库 自动生成数据库 2.数据库迁移 3.地理位置以及同步/异步处理(空了再补) 4.完全自动迁移 ...
随机推荐
- Python：windows下scikit-learn 安装和更新
scikit-learn 报错: from sklearn.model_selection import train_test_split ImportError: No module named m ...
- Hiho #1075: 开锁魔法III
Problem Statement 描述 一日,崔克茜来到小马镇表演魔法. 其中有一个节目是开锁咒:舞台上有 n 个盒子,每个盒子中有一把钥匙,对于每个盒子而言有且仅有一把钥匙能打开它.初始时,崔克茜 ...
- Swift5 语言指南(二十五) 自动引用计数(ARC)
Swift使用自动引用计数(ARC)来跟踪和管理应用程序的内存使用情况.在大多数情况下,这意味着内存管理在Swift中“正常工作”,您不需要自己考虑内存管理.当不再需要这些实例时,ARC会自动释放类实 ...
- Swift5 语言指南(二十二) 扩展
扩展为现有的类,结构,枚举或协议类型添加新功能.这包括扩展您无法访问原始源代码的类型的能力(称为追溯建模).扩展类似于Objective-C中的类别.(与Objective-C类别不同,Swift扩展 ...
- CSS3盒子模型(上)
CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...
- 人工智能-机器学习之numpy方法
机器学习 最重要的东西就是算法 这里面的水很深 所以呢我就简单的整理了一下 基础的操作 #导入numpy库 as别名 为了怕重名 import numpy as np # 打印版本号 p ...
- Apache JMeter的基本使用
安装 安装地址:http://jmeter.apache.org/download_jmeter.cgi 解压后运行jmeter.bat的批处理文件就可以了 JMeter测试脚本编写: 1,创建线程组 ...
- centos7 系统优化
#!/usr/bin/env bash #设置环境变量 export PATH=$PATH:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/u ...
- windows store app 如何计算字符所占的宽度
最近在做一个PDF电子文档相关的项目,我们的app是运行在Windows 8 / WinRT 下的.由于使用的第三方库的一些技术限制,text area竟然不支持多行文本自动换行.于是我们就需要自己实 ...
- idea自己用得到的命令
1.注释 Ctrl + / 单行注释 . 取消注释 Ctrl + Shift + / 多行注释 .取消注释 2.查找 Ctrl + N 通过输入类名打开类(标准说法是查找类文件) Ctrl + Shi ...