HTML+CSS绘制太阳系九大行星运行轨迹

最新推荐文章于 2022-09-29 09:26:19 发布
最新推荐文章于 2022-09-29 09:26:19 发布
阅读量4k 收藏 39
点赞数 6
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40292154/article/details/104458664
版权

HTML+CSS绘制太阳系九大行星运行轨迹

最近正在菜鸟教程学习前端的相关知识，学习过程中发现这个项目比较有趣且知识涵盖比较多，所以就写篇博客记录一下，方便以后查看。这是我第一次写技术博客，如遇有缘人觉得写的不好的话，请指点。

首先先展示一下运行效果

在这里插入图片描述

代码部分

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML+CSS绘制太阳系九大行星的运行轨迹</title>
		<link rel="stylesheet" type="text/css" href="solarsys.css"/>
	</head>
	<body>
		<div class="solarsys">
  			<!--太阳-->
  			<div class='sun'></div>

  			<!--水星轨道-->
  			<div class='mercuryOrbit'></div>

  			<!--水星-->
  			<div class='mercury'></div>

  			<!--金星轨道-->
  			<div class='venusOrbit'></div>

  			<!--金星-->
  			<div class='venus'></div>

  			<!--地球轨道-->
  			<div class='earthOrbit'></div>

  			<!--地球-->
  			<div class='earth'></div>

  			<!--火星轨道-->
  			<div class='marsOrbit'></div>

  			<!--火星-->
  			<div class='mars'></div>

  			<!--木星轨道-->
  			<div class='jupiterOrbit'></div>

  			<!--木星-->
  			<div class='jupiter'></div>

  			<!--土星轨道-->
  			<div class='saturnOrbit'></div>

  			<!--土星-->
  			<div class='saturn'></div>

  			<!--天王星轨道-->
  			<div class='uranusOrbit'></div>

  			<!--天王星-->
  			<div class='uranus'></div>

  			<!--海王星轨道-->
  			<div class='neptuneOrbit'></div>

  			<!--海王星-->
  			<div class='neptune'></div>
		</div>
	</body>
</html>

CSS代码部分

/*太阳系*/
.solarsys
{
  	width: 800px;
  	height: 800px;;
  	position: relative;
  	margin: 0 auto;
  	background-color: #000000;
  	padding: 0;
  	transform: scale(1);	/*缩放一倍*/
}

/*太阳属性*/
.sun
{
	left:357px;
  	top:357px;
  	height: 90px;
  	width: 90px;
  	background-color: rgb(248,107,35);
  	border-radius: 50%;	/*边框圆角*/
  	box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);/*添加阴影*/
  	position: absolute;	/*绝对定位*/
  	margin: 0;
}

/*水星属性*/
.mercury
{
	left:337.5px;
  	top:395px;	/*left和top属性与transform-origin属性分别相加就是中心*/
  	height: 10px;
  	width: 10px;
  	background-color: rgb(166,138,56);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 62.5px 5px;	/*设置旋转元素的基点位置 太阳系的基点中心为太阳圆心 这里设置高和宽为800px 所以中心为400*/
  	animation: rotate 1.5s infinite linear;	/*元素动画 指定要绑定到选择器的关键帧名称 完成时间 播放次数（无限）如何完成周期*/
}

/*水星轨道*/
.mercuryOrbit 
{
  	left:342.5px;
  	top:342.5px;
  	height: 115px;
  	width: 115px;/*height和width取半径与left和top相加刚好等于400，所以行星才会和其相应的轨道相匹配*/
  	background-color: transparent;	/*指定背景元素为透明*/
  	border-radius: 50%;
  	border-style: dashed;	/*轨道类型*/
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*金星属性*/
.venus 
{
  	left:309px;
  	top:389px;
  	height: 22px;
  	width: 22px;
  	background-color: rgb(246,157,97);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 91px 11px;
  	animation: rotate 3.84s infinite linear;
}

/*金星轨道*/
.venusOrbit 
{
  	left:320px;
  	top:320px;
  	height: 160px;
  	width: 160px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*地球属性*/
.earth 
{
  	left:266.5px;
  	top:391px;
  	height: 18px;
  	width: 18px;
  	background-color: rgb(115,114,174);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 134px 9px;
  	animation: rotate 6.25s infinite linear;
}

/*地球轨道*/
.earthOrbit 
{
  	left:275px;
  	top:275px;
  	height: 250px;
  	width: 250px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*火星属性*/
.mars 
{
  	left:222.5px;
  	top:392.5px;
  	height: 15px;
  	width: 15px;
  	background-color: rgb(140,119,63);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 177.5px 7.5px;
  	animation: rotate 11.75s infinite linear;
}

/*火星轨道*/
.marsOrbit 
{
  	left:230px;
  	top:230px;
  	height: 340px;
  	width: 340px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*木星属性*/
.jupiter 
{
  	left:134px;
  	top:379px;
  	height: 42px;
  	width: 42px;
  	background-color: rgb(156,164,143);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 266px 21px;
  	animation: rotate 74.04s infinite linear;
}

/*木星轨道*/
.jupiterOrbit 
{
  	left:155px;
  	top:155px;
  	height: 490px;
  	width: 490px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*土星属性*/
.saturn 
{
  	left:92px;
  	top:387px;
  	height: 26px;
  	width: 26px;
  	background-color: rgb(215,171,68);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 308px 13px;
  	animation: rotate 183.92s infinite linear;
}

/*土星轨道*/
.saturnOrbit 
{
  	left:105px;
  	top:105px;
  	height: 590px;
  	width: 590px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*天王星属性*/
.uranus 
{
  	left:41.5px;
  	top:386.5px;
  	height: 27px;
  	width: 27px;
  	background-color: rgb(164,192,206);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 358.5px 13.5px;
  	animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/
.uranusOrbit 
{
  	left:55px;
  	top:55px;
  	height: 690px;
  	width: 690px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

/*海王星属性*/
.neptune 
{
  	left:10px;
  	top:390px;
  	height: 20px;
  	width: 20px;
  	background-color: rgb(133,136,180);
  	border-radius: 50%;
  	position: absolute;
  	transform-origin: 390px 10px;
  	animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/
.neptuneOrbit 
{
  	left:20px;
  	top:20px;
  	height: 760px;
  	width: 760px;
  	background-color: transparent;
  	border-radius: 50%;
  	border-style: dashed;
  	border-color: gray;
  	position: absolute;
  	border-width: 1px;
  	margin: 0px;
  	padding: 0px;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);/*100%表示动画完成时*/
  }
}

到此，这个程序就完成啦！虽然比较简单，但css的知识还是比较多的，记录下来，方便以后查看。

繁花&遇见
关注
  • 6
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html5 canvas太阳系九大行星运行动态图代码
09-08
html5 canvas太阳系九大行星运行动态图代码
Html Canva之多行星环绕动态图
Super_cute_的博客
04-01 590
小行星围绕中心体进行动态环绕，并且离中心体越近，环绕速度越快。 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SolarySystem</title> </head> <body> <c...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，虽然不是非要把网站做的效果很好，但是代码的工整和文件夹的放置还是需要把这种表面功夫做好，这样你才能得到更好的分数而且不会被怀疑是代做的。适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
纯CSS3绘制太阳系行星动画运动轨迹
09-08
纯CSS3绘制太阳系行星动画运动轨迹
HTML+CSS3绘制九大行星
huaihuai_huang的博客
12-14 1455
绘制太阳系时没有利用任何JS等动态脚本，纯纯的使用H5+CSS3 当然，如果各位想要做出随着轨迹的移动行星的阴影也不断变换，那么可能就会用到JS来进行添加样式 如果想要在宽度不同的显示器上获得较好的展示，可以考虑把px换掉。 画布多说 看看效果图 CSS部分 body{ margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; } .area{ position: relative; margin: 0;
使用CSS展现出各行星轨道
weixin_51929568的博客
03-05 769
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> /*使用keyframes创建名为rotate的动画，用于让各行星绕轨道运动*/ @keyframes rotate{ 100% { transform: rotate(-360deg);/*
基于html和vue的科技星球展示网页设计
毕业作品网站
09-29 900
2、这个为视频展示页面，在页面底下有一个走马灯，通过可以通过鼠标进行切换视频，在鼠标移出去之后这个框会变得比较透明，方便观看，移上去又变得不透明，方便选择不同的视频。4、第三个页面是人物资料馆，有几个不同的主题，通过点击不同的主题可以跳转进不同的页面，里面展示的是这个领域的一些杰出科学家的资料。5、不同人物的资料卡可以直接手动进行切换，如果不点击，一定的时间间隔之后也可以自行切换，实现自动播放。1、首页有一个背景视频，中心有一个按钮，不断点击可以出现不同的文字，最后会跳转到下一个页面。
【html + css】星球球体
weixin_45562037的博客
07-07 378
效果视频展示：（html + css）星球球体
html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
weixin_30953203的博客
06-03 1092
原标题：html+css3太阳系行星运转动画效果的实现代码做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。效果静态图： 动画中包括：太阳及各行星，运行轨道，行星公转动画。先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。html的结构:一个class为solarsys的div，作为太阳系容器元素，该div的position为rela...
HTML5行星围绕太阳轨迹运动场景动画特效
06-11
HTML5行星围绕太阳轨迹运动场景动画特效，虽然比较简单，但也有九大行星围绕太阳运动的意境存在。
九大行星运行模拟图
11-06
物理上的模拟图 没事的时候弄着玩玩 里面有代码 直接运行就好
html+css3太阳系行星运转动画效果的实现代码
09-28
下面小编就为大家带来一篇html+css3太阳系行星运转动画效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS3绘制的太阳系行星动画运动轨迹效果特效代码
03-20
这是一款基于纯CSS3绘制的太阳系行星动画运动轨迹效果源码。画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用...
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
07-04
这是一款基于纯CSS3绘制的太阳系行星动画运动轨迹效果源码。画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用...
HTML+CSS太阳系旋转页面
09-28
使用了HTML+CSS的相关知识实现了太阳系中九大行星的旋转，适合初学者实现的动画效果旋转的学习，欢迎大家的评论
HTML5 canvas太阳系八大行星运行轨道图源码 HcanvasEightorbitsof.rar
11-26
HTML5 canvas太阳系八大行星运行轨道图源码 源码描述： 一、源码特点 1、HTML5 canvas太阳系八大行星运行轨道图，鼠标经过目标行星显示行星名称。 二、注意事项 1、开发环境为Visual Studio 2013，无数据库，使用...
3D游戏编程与设计 Week3
xxhi008的博客
03-13 448
这次作业是写太阳系和牧师与魔鬼那个游戏，牧师与魔鬼那个太长了，这星期我就做一下太阳系的吧。 写一个程序，实现一个完整的太阳系， 其他星球围绕太阳的转速必须不一样，且不在一个法平面上 主要参考的是师兄的博客：http://blog.csdn.net/simba_scorpio/article/details/50845573 1.首先先建立好太阳与九大行星，
html+css实现星系图
前端成长之路
04-16 1948
01-html+css+js实现时钟 02-html+css+js实现骰子 03-html+css+js实现点名系统 文章目录01-html+css+js实现时钟02-html+css+js实现骰子03-html+css+js实现点名系统前言一、整体效果二、代码实现1.背景图2.主体星系总结 前言 本文通过html和css3D旋转属性实现星系效果。 一、整体效果 整体效果如下： 1、文字逐行、渐变显示； 2、背景星系图旋转； 3、行星绕中心公转； 4、行星自转； 5、行星自身轨道绕行星旋转。 效果图如下
java 九大行星运行_html5 canvas太阳系九大行星运行动态图代码
weixin_36309193的博客
03-07 1064
特效描述：html5 canvas 太阳系 九大行星运行 动态图代码。html5 canvas这个动画加上了每个行星的名称，只要鼠标移入目标行星就会显示。代码结构1. HTML代码你浏览器不支持window.onload=function(){var oImg=new Image();oImg.src="img.png";oImg.offOn=false;oImg.onload=function(...
Html+Css实现九大行星动画效果
最新发布
06-07
好的，我可以为您提供一些基本的代码示例来实现九大行星动画效果。以下是HTML和CSS代码示例： HTML代码： ```html <div class="container"> <div class="sun"></div> <div class="mercury"></div> <div class="venus"></div> <div class="earth"></div> <div class="mars"></div> <div class="jupiter"></div> <div class="saturn"></div> <div class="uranus"></div> <div class="neptune"></div> </div> ``` CSS代码： ```css .container { position: relative; width: 600px; height: 600px; margin: 0 auto; } .sun { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; border-radius: 50%; background-color: #FFCE00; animation: spin 10s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mercury { position: absolute; top: 0; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #C2B280; animation: orbit 2s linear infinite; } .venus { position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 30px; border-radius: 50%; background-color: #E6D6AD; animation: orbit 4s linear infinite; } .earth { position: absolute; top: 0; left: 50%; margin-left: -25px; width: 50px; height: 50px; border-radius: 50%; background-color: #3F4F5F; animation: orbit 6s linear infinite; } .mars { position: absolute; top: 0; left: 50%; margin-left: -35px; width: 70px; height: 70px; border-radius: 50%; background-color: #E45F56; animation: orbit 8s linear infinite; } .jupiter { position: absolute; top: 0; left: 50%; margin-left: -50px; width: 100px; height: 100px; border-radius: 50%; background-color: #E1B80D; animation: orbit 10s linear infinite; } .saturn { position: absolute; top: 0; left: 50%; margin-left: -65px; width: 130px; height: 130px; border-radius: 50%; background-color: #E1B80D; animation: orbit 12s linear infinite; } .uranus { position: absolute; top: 0; left: 50%; margin-left: -85px; width: 170px; height: 170px; border-radius: 50%; background-color: #9BC4E2; animation: orbit 14s linear infinite; } .neptune { position: absolute; top: 0; left: 50%; margin-left: -100px; width: 200px; height: 200px; border-radius: 50%; background-color: #6384B3; animation: orbit 16s linear infinite; } @keyframes orbit { from { transform: rotate(0deg) translate(150px) rotate(0deg); } to { transform: rotate(360deg) translate(150px) rotate(-360deg); } } ``` 以上代码将会在一个 600px x 600px 的容器内展示太阳系中的九大行星，每个行星都有自己的轨道和大小。太阳会以线性方式旋转，而行星则会沿着其轨道以相同的线性速度运动。请注意，上面的CSS代码中的动画效果仅适用于最新版本的现代浏览器，而在旧版浏览器中可能会有兼容性问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值