<!DOCTYPE html>
<html>
<head>
<title>太阳系</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: black;/*设置背景颜色*/
display: flex;/*多栏多列布局*/
justify-content: center; /*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。值：居中*/
align-items: center;/*属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。值：居中*/
}
.path{
width: 600px;
height: 600px;
border:1px white solid;/*缩写边框属性设置在一个声明中所有的边框属性。值：宽度 颜色 样式（定义实线）*/
border-radius: 300px;/*半径*/
display: flex; /*属性规定元素应该生成的框的类型。*/
justify-content: center;
align-items: center;
position: relative;/*属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。值：生成相对定位的元素，相对于其正常位置进行定位。*/
}
.path2{
width: 400px;
height: 400px;
border:1px white solid;
border-radius: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.path3{
width: 300px;
height: 300px;
border:1px white solid;
border-radius: 150px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.mars{
width: 80px;
height: 80px;
background: yellow;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -190px;
animation: flyMars 6s infinite linear;
transform-origin: 50% 340px;
}
.earth{
width: 60px;
height: 60px;
background: blue;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;/*如果要实现任意位置的定位，就将其position设置成absolute*/
top:-30px;
animation: flyEarth 10s infinite linear;
transform-origin: 50% 180px;
}
.jupiter{
width: 40px;
height: 40px;
background: white;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;/*如果要实现任意位置的定位，就将其position设置成absolute*/
top:-70px;
animation: flyEarth 20s infinite linear;
transform-origin: 50% 220px;
}
.sun{
width: 60px;
height: 60px;
background: red;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
animation: sun 5s infinite;
transform-origin: 50% 50%;
}
@keyframes flyMars{
100%{
transform: rotate(1turn);
}
}
@keyframes flyEarth{
100%{
transform: rotate(360deg );/*也可设置成1turn*/
}
}
@keyframes flyjup{
100%{
transform-origin: (1turn);
}
}
@keyframes sun{
100%{
transform-origin: (1turn);
}
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<div class="path">
<div class="path2">
<div class="path3">
<div class="mars">火星</div>
<div class="earth">地球</div>
<div class="jupiter">木星</div>
<div class="sun">太阳</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在本项目中，我们探索的是如何使用纯CSS3来创建一个动态的太阳、地球和月亮旋转的模拟效果。这个效果完全不依赖JavaScript，只利用了CSS3的强大功能，因此在性能上可能更优，同时也对现代浏览器有较高的兼容性。然而...
本项目着重讲解如何运用HTML5和CSS3来构建一个3D太阳系运转体系的动画模型，这将涉及到网页布局、CSS3的transform和animation属性，以及可能的JavaScript交互控制。 首先，HTML5是现代Web开发的基础，它提供了更...
为了模拟太阳系的立体感，我们需要考虑行星的旋转。CSS3提供了`rotateZ()`函数，允许我们在Z轴上对元素进行旋转。结合`transform-origin`属性，我们可以控制旋转的中心点。例如，让行星绕自己的轴心旋转： ```css ....
这是一个基于CSS3的太阳系行星运行动画，中间是太阳，9大行星，包括行星相应的卫星，都按照自身的规律围绕太阳旋转，同时在太空中隐约模拟出许多星云，让整个动画显得更加逼真。这些动画效果都是通过CSS3动画属性...
在本篇教程中，将会详细讲解如何使用HTML和CSS3技术来创建一个太阳系行星运转动画效果。这个动画模拟了太阳系八大行星围绕太阳公转的场景，但不包括行星的卫星以及行星的自转动画。整个动画的实现主要分为两个部分：...
在这个特定的项目中，“html5 canvas太阳系九大行星运行动态图代码”是一个使用HTML5 Canvas API实现的动画效果，展示了太阳系内九大行星（水星、金星、地球、火星、木星、土星、天王星、海王星和冥王星）围绕太阳的...
本案例"Java图形界面编程案例---太阳系八大行星运转轨道"是一个很好的学习示例，旨在教授如何利用Java的图形库构建动态可视化场景，即模拟太阳系中八大行星围绕太阳的运动轨迹。 首先，这个项目的核心是Java的Swing...
`<canvas>`元素提供了在网页上进行动态图形绘制的能力，通过JavaScript可以实现对太阳系中行星运动的模拟。开发者可能使用了`requestAnimationFrame`来创建平滑的动画效果，使得行星按照实际的轨道轨迹移动。 其次...
【标题】中的“纯CSS3实现逼真的太阳系天体运行动画效果源码”意味着这个压缩包包含了一组使用CSS3技术制作的代码，旨在创建一个视觉上接近真实的太阳系模型，其中行星和其他天体按照它们实际的运动轨迹进行动画展示...
在太阳系运转的例子中，Canvas被用来绘制各个行星以及它们的轨道。开发者可以使用Canvas的`fillRect`、`strokeRect`、`arc`等方法来绘制圆形代表行星，用直线或曲线描绘轨道。通过改变行星的位置和角度，可以在...
"css3模拟3D行星运转效果图.zip"这个项目正是利用了CSS3的3D变换特性，结合jQuery库，来实现一个动态的、立体感强烈的太阳系模型，模拟出各大行星围绕地球旋转的场景。 首先，CSS3的3D变换主要包括translate3d、...
HTML5 Canvas 3D模拟太阳系小行星带运行动画，太阳系中有一个小行星带介于火星和木星轨道之间，本效果用CSS3强大的动画生成效果模拟了这些天体运行的效果，围绕一个大行星旋转的效果，三维究竟感十分强烈，看似简单...
1. **CSS3 3D 变换**：为了模拟太阳系中行星的空间运动，我们需要使用CSS3的3D变换。这包括translate3d()、rotate3d()和scale3d()等函数，它们允许我们在x、y、z三个轴上对元素进行定位和旋转，从而构建出立体空间的...
在这个“HTML5 canvas太阳系八大行星运行轨道图”实例中，我们看到的是利用canvas元素来模拟太阳系中八大行星的运行轨道，并且通过鼠标悬停功能，用户可以查看每个行星的名称，这为学习和展示天文学知识提供了一个...
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建一个动态的太阳系行星运动轨迹的效果。这个源码示例提供了一种创新的方法，让网页开发者无需借助JavaScript或其他编程语言，仅通过CSS3就能实现复杂的动画效果...
标题中的“基于WebGL原生库开发的太阳系模型”是指使用WebGL技术构建的能够模拟太阳系运行的交互式3D模型。WebGL是一种在任何兼容的现代网络浏览器中无需插件即可实现3D图形渲染的技术，它基于OpenGL标准，并且完全...
在描述太阳系天体运动的项目中，Java可以用于创建模型，模拟行星的运动规律，如开普勒三定律。你可以创建类来表示太阳、行星、卫星等天体，每个类包含位置、速度、质量和引力等属性。通过牛顿的万有引力定律，你可以...
在这个太阳系演示中，开发者利用Canvas绘制出各个星球，并通过精确的数学计算模拟出它们的运行轨迹。JavaScript的定时器（setTimeout或requestAnimationFrame）用于控制每一帧的更新，从而实现连续平滑的动画效果。 ...