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代码编写的速度,比如下面的演示: ...
随机推荐
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- vue.js实现点击后动态添加class及删除同级class
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...
- C# winform 动态操作webService
1.动态操作webService类 public static class WebServiceHelper { #region InvokeWebService //动态调用web服务 public ...
- python基础之数据类型初始
变量 贴标签 变量名规则:只能是字母下划线和数字组成,不能以数字开头,不能和关键字同名,不能使用拼音和中文,具有可描述性,区别大小写,变量名推荐写法:驼峰提,下划线(官方推荐) 变量赋值 常量 特性: ...
- 41-python基础-python3-字符串-转义字符
转义字符包含一个倒斜杠(\),紧跟着是想要添加到字符串中的字符.(尽管它包含两个字符,但大家公认它是一个转义字符.) 实例1: Python 知道,因为 Bob\'s 中的单引号有一个倒斜杠,所以它不 ...
- quick'n'dirty poc for CVE-2013-1763 SOCK_DIAG bug in kernel 3.3-3.8
/* * quick'n'dirty poc for CVE-2013-1763 SOCK_DIAG bug in kernel 3.3-3.8 * bug found by Spender * po ...
- Octave的安装
本文是参考吴恩达老师的深度学习视频而做的笔记 深度学习 引言 挑战:AI真正的挑战在于解决那些对人类来说很容易执行,但很难形式化描述的问题,比如识别人们所说的话/图像中的脸/分辨苹果和梨. 解决方案: ...
- JavaScript翻转字符串方法
先把字符串转化成数组String.prototype.split(),再借助数组的reverse方法翻转数组顺序(Array.prototype.reverse()),然后把数组转化成字符串. 使用的 ...
- 解决code first Migration 增加外键时出现错误的问题
先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...
- web集群和分布式服务以及消息补偿机制几种方案
一.为什么要集群? 1.JavaEE项目,如果部署在一台Tomcat上,所有的请求,都由这一台服务器处理,存在很大风险: A:并发处理能力有限(一般单台服务器处理的并发量为250左右,超过250,可能 ...