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代码编写的速度,比如下面的演示: ...
随机推荐
- 301重定向将不带www的域名跳转到www的域名，403 Forbidden You don’t have permission to access the URL on this server
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/14/301%e9%87%8d%e5%ae%9a%e5%90%91%e5%b0%86% ...
- iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）
1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要 ...
- List、Map、Set三个接口存取元素时，各有什么特点
List接口以特定索引来存取元素,可以有重复元素 Set接口不可以存放重复元素(使用equals方法区分是否重复) Map接口保存的是键值对(key-value-pair)映射,映射关系可以是一对一或 ...
- Process Array
http://xiaorui.cc/2016/05/10/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90multiprocessing%E7%9A%84value-array ...
- Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify proxy interfaces…..
报错:Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify ...
- tail - 输出文件的末尾部分
SYNOPSIS(总览) ../src/tail [OPTION]... [FILE]... DESCRIPTION(描述) 在标准输出上显示每个FILE的最后10行. 如果多于一个FILE,会一个接 ...
- 判断list中元素是否是相邻
private static List<Integer> findShunZi(List<Integer> tmpCards){ List<Integer> lis ...
- windows上测试网络数据跳转路径
今天遇到一个有关路由方面的问题,所以向一位CCIE大神问了点问题.就是关于ip ping包出了pc之后怎么走的. 然后告诉我了这么一个命令: Tracert(跟踪路由)是路由跟踪实用程序,用于确定 I ...
- 1、Spring MVC的web.xml配置详解（转）
版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/u010796790 1.spring 框架解决字符串编码问题:过滤器 CharacterEncodingFilt ...
- pygame游戏框架
#_author:来童星#date:2019/12/22 import pygame import sys pygame.init() size=width,height=640,480 screen ...