效果展示：

1.结构分析

既然是用动画实现太阳地球月球的轨迹，那必然是太阳居中，地球围绕太阳转，与此同时月球围绕地球转，如下图（嘿嘿，凑合看吧），就应该使用一个大盒子（div），作为背景的太空，然后是太阳和地球，再把月亮嵌套进地球里面。以下代码使用汉语拼音来写类名，方便区分。

<div><div class="beijing"><div class="taiyang"></div><div class="diqiu"><div class="yueqiu"></div></div></div></div>

2.css样式

然后先给背景，太阳，地球，月亮四个盒子分别设置自己的样式，将其设置为下面图片显示的情况(太阳居于中心的红色，黄色的是地球，而上面蓝色的是月亮)，为其设置为圆形，背景颜色，和定位位置来达到这个效果，并且设置一下边框来使以后的动画效果轨迹更清晰可见。具体参考以下代码。

 .beijing {background-color: #93b5cf;margin: 0, auto;height: 400px;width: 400px;border: 1px black solid;border-radius: 50%;position: absolute;left: 50%;margin-left: -200px;top: 100px;/* background-image: url(./picture/xu.gif) */}.taiyang {background-color: red;height: 40px;width: 40px;border-radius: 50%;/* border: 1px black solid; */position: absolute;left: 50%;margin-left: -20px;top: 50%;margin-top: -20px;}.diqiu {background-color: yellow;height: 20px;width: 20px;border-radius: 50%;position: absolute;left: 50%;margin-left: -10px;margin-top: -10.5px;transform-origin: 10px 210.5px;}.yueqiu {background-color: rgb(47, 0, 255);height: 10px;width: 10px;border-radius: 50%;position: absolute;left:50%;margin-left: -5px;margin-top: -10px;transform-origin: 5px 20px;}

3.动画设置

首先我们要实现地球围绕太阳转的效果，太阳居中心不动，地球的旋转中心改成太阳的位置，然后围绕太阳做旋转动画（transform:rotate(？deg);）。使用transform-origin来调整旋转的中心，具体位置调整参考css样式内代码。

调整旋转中心有点困难，大家可以多尝试，先实现动画效果，看动画效果慢慢调整中心。

月球围绕地球旋转与上同理。

然后我们为其设置鼠标移入的事件效果，在鼠标移入时候，地球就会围绕太阳转，同时月球围绕地球转。记得设置过渡（ transition: 7s linear;）。

.beijing:hover > .diqiu {transform:rotate(360deg);transition: 7s linear;}.beijing:hover .yueqiu{transform: rotate(360deg);transition: 7s linear;}

这段效果也可以使用css逐帧动画来写。

 @keyframes run{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

在css样式地球和月球里面加上下面代码引用动画效果：

        animation: run 6s  infinite;

有能力可以写出银河系星系围绕太阳旋转的动画，记得更改样式，设置相应的星星大小颜色背景，配合动画效果，就可以做出很漂亮的星空了。

本人才疏学浅，写的东西如果能帮助大家就心满意足了，不足之处也请多多指教。

css动画小案例（太阳地球月球运动轨迹）相关推荐

css动画小案例弹力球
什么是 CSS3 中的动画? 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.用百分比来规定变化发生的时间,或用关键词 "from" 和 &qu ...
opengl的配置和太阳-地球-月球演示
详细配置过程请点击链接 https://www.cnblogs.com/flylinmu/p/7823019.html 下面介绍opengl实例,太阳-地球-月球演示建立一个控制台程序 sun.cp ...
html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系
本文主要是描述了使用html5画出地球月球和太阳之间的环绕关系,其实他们比较简单,主要是通过旋转来控制各个之间的环绕关系!~ 输入代码,里面有注释: ------------------------- ...
＜CSS3练习＞ CSS动画综合案例热点图（含素材）
CSS动画分为两个步骤: 1.先定义动画 2.再调用动画语法如下 1.定义: @keyframs 动画名称 {from(0%){}to(100%){}} 这里的数字可以从0%~100% 可以任意代 ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
java绘制地球绕太阳转_Unity3D 公转小案例：地球围绕太阳转
公转指的是什么? 公转(英语:Orbital revolution),是指一物体以另一物体为中心,沿一定轨道所作的循环运动:所沿着的轨道可以为圆.椭圆.双曲线或抛物线.在天文学上,一般用来形容行星.彗 ...
Canvas模拟太阳地球月球的运动过程
先看效果图代码 package com.test.paintdemo.pathrelate;import android.content.Context; import android.graphi ...
css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡
目录一,前言二,案例一,多个镜像渐变复合出图像 1.分析 2.第一步,四角的白色与红色条纹. 3.第二步,从上到下的渐变 4.第四步,后面的蓝红条纹效果 5.源码 6.奇思妙想三,径向渐变做出好 ...
matlab地球公转,Unity模拟太阳地球月球公转自转
1. 打开Unity编辑器,创建三个sphere,依次重命名为Sun,Earth,Moon.将三个球体大小比例控制在5:3:1,并适当调整位置. 2. 分别为三个小球附上材质 3. 新建脚本文件,重命 ...
简单静态web页面+动画(小案例)
话不多说,先看效果图图片会动态变化,由大到小,展现在页面,没有录制动图的工具,演示不了,不好意思接下来画图展示底部看源码(html部分): <!DOCTYPE html> < ...

css动画小案例（太阳地球月球运动轨迹）

效果展示：

1.结构分析

2.css样式

3.动画设置

css动画小案例（太阳地球月球运动轨迹）相关推荐

最新文章

热门文章