<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS实现的太阳系运行动画</title>
<style>
/*
Solar System true time scaled by Malik Dellidj
Revolution of planets in earth days (From Wikipedia)
Mercury : ~87,5 days
Venus : ~224,7 days
Earth : ~365,2563 days
+ Moon : ~27,3216 days (around earth)
Mars : ~687 days (~1,8 year)
Jupiter : ~4 331 days (~12 year)
Saturn : ~10 747 days (~30 year)
Uranus : ~30 589 days (~84 year)
Neptune : ~59 802 days (~165 year)
*/
*,
*:before,
*:after {
padding: 0;
margin: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
background: -webkit-radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
background-attachment: fixed;
}
h1 {
font-weight: 300;
font-size: 2.5em;
text-transform: uppercase;
font-family: Lato;
line-height: 1.6em;
letter-spacing: .1em;
}
a,
a:visited {
text-decoration: none;
color: white;
opacity: .7;
}
a:hover,
a:visited:hover {
opacity: 1;
}
a.icon,
a:visited.icon {
margin-right: 2px;
padding: 3px;
}
.description {
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 25%;
z-index: 999;
}
.description p {
font-size: .9em;
}
.description p + p {
margin-top: 20px;
}
.description p.author {
font-size: .7em;
}
.description p.author .fa-heart {
color: #860014;
}
hr {
margin: 26px 0;
border: 0;
border-top: 1px solid white;
background: transparent;
width: 25%;
opacity: .1;
}
code {
color: #ae94c0;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: .9em;
}
.solar-syst {
margin: 0 auto;
width: 100%;
height: 100%;
position: relative;
}
.solar-syst:after {
content: "";
position: absolute;
height: 2px;
width: 2px;
top: -2px;
background: white;
box-shadow: 425px 285px 0 0px rgba(255, 255, 255, 0.754), 814px 962px 0 0px rgba(255, 255, 255, 0.66), 1234px 858px 0 0px rgba(255, 255, 255, 0.174), 95px 896px 0 0px rgba(255, 255, 255, 0.043), 473px 1321px 0 0px rgba(255, 255, 255, 0.247), 796px 846px 0 0px rgba(255, 255, 255, 0.974), 1115px 601px 0 0px rgba(255, 255, 255, 0.625), 1435px 1313px 0 0px rgba(255, 255, 255, 0.459), 661px 1783px 0 0px rgba(255, 255, 255, 0.263), 1338px 676px 0 0px rgba(255, 255, 255, 0.071), 148px 534px 0 0px rgba(255, 255, 255, 0.376), 852px 201px 0 0px rgba(255, 255, 255, 1), 361px 1197px 0 0px rgba(255, 255, 255, 0.905), 1162px 925px 0 0px rgba(255, 255, 255, 0.756), 933px 554px 0 0px rgba(255, 255, 255, 0.003), 680px 1163px 0 0px rgba(255, 255, 255, 0.946), 6px 852px 0 0px rgba(255, 255, 255, 0.036), 975px 863px 0 0px rgba(255, 255, 255, 0.967), 838px 1493px 0 0px rgba(255, 255, 255, 0.644), 1645px 67px 0 0px rgba(255, 255, 255, 0.577), 778px 620px 0 0px rgba(255, 255, 255, 0.11), 568px 1578px 0 0px rgba(255, 255, 255, 0.56), 1011px 633px 0 0px rgba(255, 255, 255, 0.441), 739px 149px 0 0px rgba(255, 255, 255, 0.047), 629px 559px 0 0px rgba(255, 255, 255, 0.185), 1647px 1663px 0 0px rgba(255, 255, 255, 0.697), 756px 454px 0 0px rgba(255, 255, 255, 0.857), 1528px 755px 0 0px rgba(255, 255, 255, 0.694), 1563px 552px 0 0px rgba(255, 255, 255, 1), 1338px 1584px 0 0px rgba(255, 255, 255, 0.662), 519px 1092px 0 0px rgba(255, 255, 255, 0.566), 1780px 194px 0 0px rgba(255, 255, 255, 0.498), 1302px 249px 0 0px rgba(255, 255, 255, 0.529), 1003px 960px 0 0px rgba(255, 255, 255, 0.317), 416px 1027px 0 0px rgba(255, 255, 255, 0.159), 799px 427px 0 0px rgba(255, 255, 255, 0.439), 364px 226px 0 0px rgba(255, 255, 255, 0.581), 227px 474px 0 0px rgba(255, 255, 255, 0.407), 867px 1797px 0 0px rgba(255, 255, 255, 0.751), 88px 732px 0 0px rgba(255, 255, 255, 0.368), 983px 314px 0 0px rgba(255, 255, 255, 0.285), 810px 1084px 0 0px rgba(255, 255, 255, 0.171), 1136px 698px 0 0px rgba(255, 255, 255, 0.896), 243px 594px 0 0px rgba(255, 255, 255, 0.768), 1171px 476px 0 0px rgba(255, 255, 255, 0.001), 1275px 909px 0 0px rgba(255, 255, 255, 0.852), 1666px 1760px 0 0px rgba(255, 255, 255, 0.001), 431px 1462px 0 0px rgba(255, 255, 255, 0.546), 1053px 1501px 0 0px rgba(255, 255, 255, 0.625), 1704px 425px 0 0px rgba(255, 255, 255, 0.364), 1182px 1236px 0 0px rgba(255, 255, 255, 0.868), 1781px 322px 0 0px rgba(255, 255, 255, 0.431), 1484px 264px 0 0px rgba(255, 255, 255, 0.992), 264px 608px 0 0px rgba(255, 255, 255, 0.688), 1448px 1173px 0 0px rgba(255, 255, 255, 0.376), 602px 1578px 0 0px rgba(255, 255, 255, 0.495), 1391px 1540px 0 0px rgba(255, 255, 255, 0.59), 688px 505px 0 0px rgba(255, 255, 255, 0.064), 1368px 1486px 0 0px rgba(255, 255, 255, 0.572), 609px 1272px 0 0px rgba(255, 255, 255, 0.804), 146px 1456px 0 0px rgba(255, 255, 255, 0.861), 1424px 885px 0 0px rgba(255, 255, 255, 0.622), 1445px 1311px 0 0px rgba(255, 255, 255, 0.521), 928px 881px 0 0px rgba(255, 255, 255, 0.406), 1259px 598px 0 0px rgba(255, 255, 255, 0.979), 1039px 1651px 0 0px rgba(255, 255, 255, 0.492), 1140px 1362px 0 0px rgba(255, 255, 255, 0.35), 1463px 1150px 0 0px rgba(255, 255, 255, 0.592), 271px 500px 0 0px rgba(255, 255, 255, 0.883), 682px 987px 0 0px rgba(255, 255, 255, 0.959), 97px 1016px 0 0px rgba(255, 255, 255, 0.712), 130px 468px 0 0px rgba(255, 255, 255, 0.387), 666px 1447px 0 0px rgba(255, 255, 255, 0.17), 1268px 1354px 0 0px rgba(255, 255, 255, 0.759), 1695px 1125px 0 0px rgba(255, 255, 255, 0.474), 1274px 208px 0 0px rgba(255, 255, 255, 0.739), 951px 1668px 0 0px rgba(255, 255, 255, 0.082), 1002px 857px 0 0px rgba(255, 255, 255, 0.251), 676px 744px 0 0px rgba(255, 255, 255, 0.344), 806px 1347px 0 0px rgba(255, 255, 255, 0.435), 467px 803px 0 0px rgba(255, 255, 255, 0.31), 816px 1119px 0 0px rgba(255, 255, 255, 0.22), 789px 516px 0 0px rgba(255, 255, 255, 0.29), 385px 290px 0 0px rgba(255, 255, 255, 0.978), 580px 1634px 0 0px rgba(255, 255, 255, 0.944), 730px 534px 0 0px rgba(255, 255, 255, 0.249), 205px 1521px 0 0px rgba(255, 255, 255, 0.507), 1241px 1605px 0 0px rgba(255, 255, 255, 0.152), 1665px 1007px 0 0px rgba(255, 255, 255, 0.696), 609px 1490px 0 0px rgba(255, 255, 255, 0.976), 355px 698px 0 0px rgba(255, 255, 255, 0.949), 536px 1271px 0 0px rgba(255, 255, 255, 0.259), 764px 867px 0 0px rgba(255, 255, 255, 0.49), 1676px 187px 0 0px rgba(255, 255, 255, 0.64), 1124px 1599px 0 0px rgba(255, 255, 255, 0.086), 1305px 260px 0 0px rgba(255, 255, 255, 0.038), 1721px 1486px 0 0px rgba(255, 255, 255, 0.669), 240px 688px 0 0px rgba(255, 255, 255, 0.358), 408px 355px 0 0px rgba(255, 255, 255, 0.655), 1639px 1577px 0 0px rgba(255, 255, 255, 0.84), 36px 1596px 0 0px rgba(255, 255, 255, 0.027), 1400px 1248px 0 0px rgba(255, 255, 255, 0.437), 208px 1517px 0 0px rgba(255, 255, 255, 0.704), 277px 1468px 0 0px rgba(255, 255, 255, 0.027), 1292px 336px 0 0px rgba(255, 255, 255, 0.097), 1739px 712px 0 0px rgba(255, 255, 255, 0.961), 872px 650px 0 0px rgba(255, 255, 255, 0.345), 1768px 1756px 0 0px rgba(255, 255, 255, 0.423), 1729px 717px 0 0px rgba(255, 255, 255, 0.886), 371px 172px 0 0px rgba(255, 255, 255, 0.42), 868px 1599px 0 0px rgba(255, 255, 255, 0.853), 381px 1132px 0 0px rgba(255, 255, 255, 0.451), 216px 1482px 0 0px rgba(255, 255, 255, 0.222), 1696px 328px 0 0px rgba(255, 255, 255, 0.255), 1108px 29px 0 0px rgba(255, 255, 255, 0.329), 1471px 1718px 0 0px rgba(255, 255, 255, 0.929), 351px 763px 0 0px rgba(255, 255, 255, 0.907), 1278px 1755px 0 0px rgba(255, 255, 255, 0.957), 981px 1406px 0 0px rgba(25
纯CSS3实现逼真的太阳系天体运行动画效果源码.zip
版权申诉
38 浏览量
2022-11-01
00:00:18
上传
评论
收藏 10KB ZIP 举报
纯CSS3实现逼真的太阳系天体运行动画效果源码.zip （1个子文件） 
132689885618688305 
index.html 50KB资源评论
易小侠
- 粉丝: 6498
- 资源: 9万+
最新资源
- 基于 C++实现对材料内部缺陷进行无损检测
- 一些 html、bootstrap框架的后台模板集合
- SIMATIC-WinCC-Unified-PC-V18-安装包-链接地址.txt
- 关于代码移植的初步探讨与类似经验02-以stm32的SDIO接口同SD卡（tf卡/SDHC）的交互为例
- 基于 python利用bert预训练的中文模型进行文本分类 数据集中文情感分析语料
- 62道Redis高频题整理(附答案背诵版).md
- 后台请求的数据解析的东西
- WinForms 绘制时钟.zip
- 工具变量巡回DID数据（2000-2022）.txt
- EDA实验课设-基于FPGA设计的贪吃蛇小游戏quartus工程Verilog源码+课设文档报告.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
