Html+css编写太阳星系
我们都知道太阳系是以太阳为中心的，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星），而我用html和css所写的就是八大行星和太阳组成的星系，比较简易，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background-color: #9370DB;
}
ul {
height: 600px;
width: 600px;
margin: 50px auto;
list-style: none;
/* background: red; */
}
ul li {
/* 在页面的中间呈现 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 2px solid #D3D3D3;
}
/* 最中间圆的设置--太阳 */
li:nth-child(1) {
width: 60px;
height: 60px;
border-radius: 50%;
/* 设置阴影 */
box-shadow: 0 0 50px #FAFF27;
background-color: #FAFF27;
}
/* 设置第二个轨道线 */
li:nth-child(2) {
width: 120px;
height: 120px;
border-radius: 50%;
/* animation简写：名称 时间 速度（下面设置的速度从头到尾相同） 播放次数（此为无限） */
animation: rotate 30s linear infinite;
}
/* 水星设置 */
li:nth-child(2) span {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: deepskyblue;
position: absolute;
top: 0;
left: 25px;
}
li:nth-child(3) {
width: 180px;
height: 180px;
border-radius: 50%;
animation: rotate 20s linear infinite;
}
/* 金星 */
li:nth-child(3) span {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gold;
position: absolute;
top: 0;
left: 35px;
}
li:nth-child(4) {
width: 240px;
height: 240px;
border-radius: 50%;
animation: rotate 20s linear infinite;
}
/* 地球 */
li:nth-child(4) > span {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #6dff39;
position: absolute;
top: 0;
left: 135px;
animation: rotate 10s linear infinite;
}
/* 月亮 */
li:nth-child(4) > span span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff40c0;
position: absolute;
top: 0;
left: 30px;
} li:nth-child(5) {
width: 300px;
height: 300px;
border-radius: 50%;
animation: rotate 10s linear infinite;
}
/* 火星 */
li:nth-child(5) span {
width: 18px;
height: 18px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
left: 90px;
}
li:nth-child(6) {
width: 360px;
height: 360px;
border-radius: 50%;
animation: rotate 30s linear infinite;
}
/* 木 */
li:nth-child(6) span {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: burlywood;
position: absolute;
top: 0;
left: 100px;
}
li:nth-child(7) {
width: 420px;
height: 420px;
border-radius: 50%;
animation: rotate 40s linear infinite;
}
/* 土 */
li:nth-child(7) > span {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: brown;
position: absolute;
top: 0;
left: 190px;
animation: rotate 15s linear infinite;
} li:nth-child(8) {
width: 480px;
height: 480px;
border-radius: 50%;
animation: rotate 10s linear infinite;
}
/* 天王 */
li:nth-child(8) span {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #3f8042;
position: absolute;
top: 0;
left: 175px;
}
li:nth-child(9) {
width: 540px;
height: 540px;
border-radius: 50%;
animation: rotate 20s linear infinite;
}
li:nth-child(9) span {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #0000FF;
position: absolute;
top: 0;
left: 175px;
}
/* 关键帧 */
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li><span></span></li>
<li><span></span></li>
<li><span><span></span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span><span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</body>
</html>
Html+css编写太阳星系的更多相关文章
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- css编写注意事项（不定时更新）
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
- css编写规范最佳实践
最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...
- 用CSS编写多种常见的图形
用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...
- CSS编写技巧
1.尽量少的使用全局的重置代码 全局重置代码:*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生,并且有很多人的第一句CSS代码就是这句.它可以避免不同浏览器的默认间距不同而 ...
- css编写规范
一.注释规范 1.文件顶部注释(推荐使用) /* * @description: 中文说明 * @author: name * @update: name (2013-04-13 18:32) */ ...
- （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
随机推荐
- swoole安装异步reids
/usr/local/php/bin/phpize ./configure --with-php-config=/usr/local/php/bin/php-config --enable-async ...
- position: relative 和 position: absoution 的详解
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...
- 提交disable的Select值到后台
需求:界面上把select控件disable,然后将默认值传到后台 问题1:select disable: js中可以这样写: document.getElementById("provin ...
- HTTP权威指南读书笔记——第一章（HTTP概述）
1.HTTP(Hypertext Transfer Protocol,超文本传输协议)是在万维网上进行通信时所使用的协议方案,HTTP是应用层协议,无需关心网络通信的细节,细节交给了传输层协议TCP/ ...
- 第九章 Service
2019-09-23 今天距离2020年刚好有一百天,希望在未来的百日里能不负期待 不忘初心,方得始终, 初心易得,始终难守. 一.Service 的概念 Kubernetes Service定义了这 ...
- 关于STLINK
关于STLINK 1.STLIN固件升级 1)打开ST-LINK Utility,选择ST-LINK->Firmware update 2)连接ST-LINK 3)可以看到STLINK当前的软件 ...
- 企业级NginxWeb服务优化实战（上）
企业级NginxWeb服务优化实战(上) 1. Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息 一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题 ...
- CF817E Choosing The Commander
\(\mathtt{CF817E}\) \(\mathcal{Description}\) 有 \(q\) 个操作\((1 \leq q \leq 10^{5})\): 1.加入一个数 \(p_i(1 ...
- java.lang.SecurityException: class "javax.servlet.ServletRegistration"'s signer information does not match signer information of other classes in the same package
报错信息: 报错截图: 解决方案: 因为本人是sbt项目,所以添加一下依赖之后解决: 如果是maven项目的话,添加依赖到pom文件中然后在重新build,之后就可以了
- jedate(日期插件)
首先要引入JQuery,然后引入jedate.css和jedate.js(注:需要把下载好的jedate文件夹整个的放在项目中,不然图标无法显示) 没有把整个文件夹放进去的效果 ...