HTML+CSS3绘制九大行星

绘制太阳系时没有利用任何JS等动态脚本，纯纯的使用H5+CSS3

当然，如果各位想要做出随着轨迹的移动行星的阴影也不断变换，那么可能就会用到JS来进行添加样式

如果想要在宽度不同的显示器上获得较好的展示，可以考虑把px换掉。

画布多说

看看效果图

CSS部分

body{margin: 0;padding: 0;overflow: hidden;box-sizing: border-box;
}
.area{position: relative;margin: 0;padding: 0;width: 100vw;height: 100vh;background-color: black;
}
.sun{position: absolute;top: 50%;left: 50%;margin: 0;padding: 0;width: 8em;height: 8em;background-color: rgba(248, 107, 35);border-radius: 50%;box-shadow: 0px 0px 20px 5px rgba(248, 107, 35);transform: translate(-50%, -50%);
}
.orbit{position: absolute;left: 50%;top: 50%;margin: 0;padding: 0;background-color: transparent;border-radius: 50%;border-style: dotted;border-color: gray;border-width: 1px;transform: translate(-50%, -50%);
}
.planet-1{position: absolute;left: 49.9%;top: 41.6%;border-radius: 50%;width: .305em;height: .305em;background-color: aqua;transform-origin: 2px 79px;animation: rotate .87s infinite linear;
}
.planet-2{position: absolute;left: 49.7%;top: 40%;width: .756em;height: .756em;background-color: yellow;border-radius: 50%;transform-origin: 6px 93px;animation: counter-rotate 2.24s infinite linear;
}
.planet-3{position: absolute;top: 38.9%;left: 49.7%;width: .797em;height: .797em;background-color: blue;border-radius: 50%;transform-origin: 6px 104px;animation: rotate 3.69s infinite linear;
}
.planet-4{position: absolute;top: 37.6%;left: 49.9%;width: .427em;height: .427em;background-color: red;border-radius: 50%;transform-origin: 2px 117px;animation: rotate 6.86s infinite linear;
}
.planet-5{position: absolute;top: 25.3%;left: 47.6%;width: 5.958em;height: 5.958em;background-color: #8b6508;border-radius: 50%;transform-origin: 38px 232px;animation: rotate 43.32s infinite linear;
}
.planet-6{position: absolute;top: 17%;left: 48.2%;width: 5.02em;height: 5.02em;background-color: rgb(237, 189, 101);border-radius: 50%;transform-origin: 38px 310px;animation: rotate 107.59s infinite linear;
}
.planet-7{position: absolute;top: 8.5%;left: 49.3%;width: 2.13em;height: 2.13em;background-color: #87CEEB;border-radius: 50%;transform-origin: 14px 388px;animation: counter-rotate 306.85s infinite linear;
}
.planet-8{position: absolute;top: 3%;left: 49.4%;width: 2.06em;height: 2.06em;background-color: rgb(0, 55, 120);border-radius: 50%;transform-origin: 14px 441px;animation: rotate 11.64s infinite linear;
}
.planet-9{position: absolute;top: 0.9%;left: 49.95%;width: .242em;height: .242em;background-color: #e6e6fa;border-radius: 50%;transform-origin: 4px 461px;animation: rotate 2.48s infinite linear;
}
@keyframes rotate{100%{transform: rotate(360deg);}
}
@keyframes counter-rotate{100%{transform: rotate(-360deg);}
}

HTML代码

<div class="area"><div class="sun"></div><div class="orbit" style="width: 9.548em;height: 9.548em;"></div><div class="planet-1"></div><div class="orbit" style="width: 10.892em;height: 10.892em;"></div><div class="planet-2"></div><div class="orbit" style="width: 12em;height: 12em;"></div><div class="planet-3"></div><div class="orbit" style="width: 14.08em;height: 14.08em;"></div><div class="planet-4"></div><div class="orbit" style="width: 23.6em;height: 23.6em;"></div><div class="planet-5"></div><div class="orbit" style="width: 33.758em;height: 33.758em;"></div><div class="planet-6"></div><div class="orbit" style="width: 46.436em;height: 46.436em;"></div><div class="planet-7"></div><div class="orbit" style="width: 53.15em;height: 53.15em;"></div><div class="planet-8"></div><div class="orbit" style="width: 57.35em;height: 57.35em;"></div><div class="planet-9"></div>
</div>

HTML+CSS3绘制九大行星相关推荐

HTML+CSS绘制太阳系九大行星运行轨迹
HTML+CSS绘制太阳系九大行星运行轨迹最近正在菜鸟教程学习前端的相关知识,学习过程中发现这个项目比较有趣且知识涵盖比较多,所以就写篇博客记录一下,方便以后查看.这是我第一次写技术博客,如遇有缘人 ...
java 九大行星运行_html5 canvas太阳系九大行星运行动态图代码
特效描述:html5 canvas 太阳系九大行星运行动态图代码.html5 canvas这个动画加上了每个行星的名称,只要鼠标移入目标行星就会显示. 代码结构 1. HTML代码你浏览器不支持 ...
Html+Css实现九大行星动画效果
前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了, 今年神舟十一号载人飞船顺利发射成功,中国航天 ...
html 根据坐标画多边形,28种css3绘制多边形代码分享
本文分享了28种CSS3绘制多边形的代码.在做网页项目中需要使用多边形扇形图形来完成一些功能,第一印象就是使用CSS3来完成.经过查资料发现了transform 的skew()正好合适且且使用方便. ...
css3:绘制android3蜂巢Honeycomb
之前写过一个类似的,css3绘制android机器人图形.谷歌最近发布了android3,这次的图形挺好看的,很多地方都用到圆角,所以就想到用css3来实现.点击观看演示隔天再做了些修改,比之前的好 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
css3绘制的钢琴代码
下载地址 css3绘制的钢琴代码,键盘带动画效果. dd:
如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
看了腾讯全端团队AlloyTeam发布的这篇<使用CSS3绘制腾讯QQ的企鹅Logo>文章,自己仿照了一下,做了个是山寨版的QQ企鹅. 之所以称之为山寨版,是因为原版绘出来的是这样: 而我 ...
css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形. 为了使指针转动起来,我们需要使用-webkit-transfo ...

HTML+CSS3绘制九大行星

CSS部分

HTML代码

HTML+CSS3绘制九大行星相关推荐

最新文章

热门文章