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代码编写的速度,比如下面的演示: ...
随机推荐
- 高级UI晋升之自定义View实战（八）
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章自定义流式布局来进行介绍: 一般常见的流式布局由两种,一种是横向的个数固定 ...
- requests返回页面乱码
req=requests.post(domain,params,json=None) req=req.content.decode()
- 3.3-Cypher语言及语法使用
Cypher是一种图数据库查询语言,表现力丰富,查询效率高,其地位和作用与关系型数据库中的SQL语言相当. Cypher具备的能力: Cypher通过模式匹配图数据库中的节点和关系,来提取信息或者修改 ...
- Android开发：Handler的简单使用（一）
1.Handler是什么? 原文: A Handler allows you to send and process Message and Runnable objects associated w ...
- 2018-8-10-win10-UWP-button
title author date CreateTime categories win10 UWP button lindexi 2018-08-10 19:16:53 +0800 2018-2-13 ...
- Jedis连接池的使用(转)
http://www.cnblogs.com/linjiqin/archive/2013/06/14/3135248.html 所需jar:jedis-2.1.0.jar和commons-pool-1 ...
- Java/sql找出oracle数据库有空格的列
1.java方式 String table_sql = "select table_name from user_tables";//所有用户表 List<String> ...
- input select 值得绑定与获取
<div style="margin-top:100px"> <!--Input 值得绑定--> <div id="app20"& ...
- 使用SpringBoot AOP 记录操作日志、异常日志
平时我们在做项目时经常需要对一些重要功能操作记录日志,方便以后跟踪是谁在操作此功能:我们在操作某些功能时也有可能会发生异常,但是每次发生异常要定位原因我们都要到服务器去查询日志才能找到,而且也不能对发 ...
- JCF——List
ArrayList LinkedList Vector