纯css打造太阳系行星运行轨迹图运动版-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/*
  Malik Dellidj - @Dathink

  Solar System orbit animation true time scaled

  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 years)
  Saturn : ~10 747 days (~30 years)
  Uranus : ~30 589 days (~84 years)
  Neptune : ~59 802 days (~165 years)
  Pluto : ~90 580 days (~248 years)
*/
*, *:before, *:after {
  padding: 0;
  margin: 0;
  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: 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: 923px 266px 0 0px rgba(255, 255, 255, 0.474) , 567px 242px 0 0px rgba(255,255,255, 0.487) , 677px 1302px 0 0px rgba(255,255,255, 0.705) , 1588px 1146px 0 0px rgba(255,255,255, 0.349) , 659px 1697px 0 0px rgba(255,255,255, 0.615) , 322px 718px 0 0px rgba(255,255,255, 0.173) , 882px 719px 0 0px rgba(255,255,255, 0.281) , 1696px 463px 0 0px rgba(255,255,255, 0.837) , 1518px 799px 0 0px rgba(255,255,255, 0.135) , 597px 1023px 0 0px rgba(255,255,255, 0.132) , 428px 1285px 0 0px rgba(255,255,255, 0.997) , 1214px 1569px 0 0px rgba(255,255,255, 0.745) , 175px 845px 0 0px rgba(255,255,255, 0.334) , 1648px 1168px 0 0px rgba(255,255,255, 0.936) , 1337px 536px 0 0px rgba(255,255,255, 0.387) , 1424px 756px 0 0px rgba(255,255,255, 0.329) , 1162px 484px 0 0px rgba(255,255,255, 0.248) , 661px 65px 0 0px rgba(255,255,255, 0.254) , 1272px 577px 0 0px rgba(255,255,255, 0.793) , 523px 365px 0 0px rgba(255,255,255, 0.891) , 730px 1521px 0 0px rgba(255,255,255, 0.946) , 708px 385px 0 0px rgba(255,255,255, 0.529) , 212px 855px 0 0px rgba(255,255,255, 0.462) , 987px 117px 0 0px rgba(255,255,255, 0.564) , 853px 166px 0 0px rgba(255,255,255, 0.081) , 249px 1179px 0 0px rgba(255,255,255, 0.323) , 150px 435px 0 0px rgba(255,255,255, 0.486) , 113px 281px 0 0px rgba(255,255,255, 0.592) , 1138px 1624px 0 0px rgba(255,255,255, 0.128) , 1604px 1563px 0 0px rgba(255,255,255, 0.574) , 1517px 234px 0 0px rgba(255,255,255, 0.653) , 900px 1051px 0 0px rgba(255,255,255, 0.681) , 1710px 604px 0 0px rgba(255,255,255, 0.967) , 1569px 1017px 0 0px rgba(255,255,255, 0.965) , 1761px 1486px 0 0px rgba(255,255,255, 0.056) , 1586px 1286px 0 0px rgba(255,255,255, 0.629) , 828px 1494px 0 0px rgba(255,255,255, 0.941) , 138px 119px 0 0px rgba(255,255,255, 0.344) , 1696px 879px 0 0px rgba(255,255,255, 0.157) , 892px 1111px 0 0px rgba(255,255,255, 0.363) , 1143px 1702px 0 0px rgba(255,255,255, 0.376) , 489px 790px 0 0px rgba(255,255,255, 0.2) , 567px 368px 0 0px rgba(255,255,255, 0.756) , 1152px 561px 0 0px rgba(255,255,255, 0.801) , 737px 172px 0 0px rgba(255,255,255, 0.086) , 532px 953px 0 0px rgba(255,255,255, 0.646) , 160px 1632px 0 0px rgba(255,255,255, 0.509) , 786px 74px 0 0px rgba(255,255,255, 0.58) , 979px 1141px 0 0px rgba(255,255,255, 0.028) , 889px 1493px 0 0px rgba(255,255,255, 0.103) , 1085px 625px 0 0px rgba(255,255,255, 0.752) , 409px 1123px 0 0px rgba(255,255,255, 0.102) , 554px 147px 0 0px rgba(255,255,255, 0.894) , 1005px 678px 0 0px rgba(255,255,255, 0.512) , 648px 971px 0 0px rgba(255,255,255, 0.607) , 440px 594px 0 0px rgba(255,255,255, 0.861) , 421px 931px 0 0px rgba(255,255,255, 0.836) , 1303px 800px 0 0px rgba(255,255,255, 0.684) , 1623px 532px 0 0px rgba(255,255,255, 0.597) , 676px 242px 0 0px rgba(255,255,255, 0.866) , 833px 1155px 0 0px rgba(255,255,255, 0.765) , 942px 1102px 0 0px rgba(255,255,255, 0.86) , 556px 570px 0 0px rgba(255,255,255, 0.307) , 172px 710px 0 0px rgba(255,255,255, 0.435) , 266px 1153px 0 0px rgba(255,255,255, 0.48) , 963px 1595px 0 0px rgba(255,255,255, 0.989) , 1528px 745px 0 0px rgba(255,255,255, 0.517) , 1556px 1103px 0 0px rgba(255,255,255, 0.379) , 706px 604px 0 0px rgba(255,255,255, 0.619) , 543px 1153px 0 0px rgba(255,255,255, 0.034) , 1192px 1503px 0 0px rgba(255,255,255, 0.791) , 176px 1450px 0 0px rgba(255,255,255, 0.183) , 1602px 358px 0 0px rgba(255,255,255, 0.044) , 244px 170px 0 0px rgba(255,255,255, 0.834) , 748px 343px 0 0px rgba(255,255,255, 0.639) , 1568px 663px 0 0px rgba(255,255,255, 0.944) , 1602px 869px 0 0px rgba(255,255,255, 0.213) , 787px 1126px 0 0px rgba(255,255,255, 0.452) , 222px 1142px 0 0px rgba(255,255,255, 0.652) , 1527px 577px 0 0px rgba(255,255,255, 0.069) , 684px 716px 0 0px rgba(255,255,255, 0.9) , 344px 1624px 0 0px rgba(255,255,255, 0.074) , 1381px 1596px 0 0px rgba(255,255,255, 0.497) , 1485px 82px 0 0px rgba(255,255,255, 0.66) , 629px 1524px 0 0px rgba(255,255,255, 0.205) , 1053px 1734px 0 0px rgba(255,255,255, 0.515) , 13px 1777px 0 0px rgba(255,255,255, 0.64) , 1795px 172px 0 0px rgba(255,255,255, 0.62) , 1650px 66px 0 0px rgba(255,255,255, 0.975) , 378px 120px 0 0px rgba(255,255,255, 0.185) , 595px 1560px 0 0px rgba(255,255,255, 0.05) , 683px 1778px 0 0px rgba(255,255,255, 0.016) , 1683px 1228px 0 0px rgba(255,255,255, 0.697) , 1552px 1452px 0 0px rgba(255,255,255, 0.266) , 652px 85px 0 0px rgba(255,255,255, 0.427) , 160px 296px 0 0px rgba(255,255,255, 0.756) , 1609px 677px 0 0px rgba(255,255,255, 0.626) , 1015px 1613px 0 0px rgba(255,255,255, 0.896) , 917px 1614px 0 0px rgba(255,255,255, 0.941) , 1632px 1608px 0 0px rgba(255,255,255, 0.389) , 862px 154px 0 0px rgba(255,255,255, 0.376) , 364px 224px 0 0px rgba(255,255,255, 0.33) , 776px 640px 0 0px rgba(255,255,255, 0.652) , 341px 1191px 0 0px rgba(255,255,255, 0.861) , 1123px 1467px 0 0px rgba(255,255,255, 0.105) , 867px 1659px 0 0px rgba(255,255,255, 0.092) , 1164px 1624px 0 0px rgba(255,255,255, 0.325) , 1536px 13px 0 0px rgba(255,255,255, 0.405) , 412px 89px 0 0px rgba(255,255,255, 0.209) , 540px 583px 0 0px rgba(255,255,255, 0.185) , 16px 26px 0 0px rgba(255,255,255, 0.009) , 1264px 34px 0 0px rgba(255,255,255, 0.808) , 1614px 1390px 0 0px rgba(255,255,255, 0.658) , 1008px 1259px 0 0px rgba(255,255,255, 0.555) , 9px 485px 0 0px rgba(255,255,255, 0.408) , 1571px 1134px 0 0px rgba(255,255,255, 0.787) , 601px 555px 0 0px rgba(255,255,255, 0.784) , 911px 238px 0 0px rgba(255,255,255, 0.893) , 1613px 1203px 0 0px rgba(255,255,255, 0.331) , 147px 1217px 0 0px rgba(255,255,255, 0.976) , 350px 217px 0 0px rgba(255,255,255, 0.268) , 349px 1786px 0 0px rgba(255,255,255, 0.574) , 1764px 1786px 0 0px rgba(255,255,255, 0.372) , 465px 1653px 0 0px rgba(255,255,255, 0.035) , 1152px 850px 0 0px rgba(255,255,255, 0.022) , 1597px 188px 0 0px rgba(255,255,255, 0.166) , 925px 917px 0 0px rgba(255,255,255, 0.11) , 892px 1164px 0 0px rgba(255,255,255, 0.405) , 1686px 1099px 0 0px rgba(255,255,255, 0.227) , 1445px 478px 0 0px rgba(255,255,255, 0.531) , 1741px 232px 0 0px rgba(255,255,255, 0.76) , 956px 1205px 0 0px rgba(255,255,255, 0.035) , 1013px 116px 0 0px rgba(255,255,255, 0.857) , 188px 1584px 0 0px rgba(255,255,255, 0.782) , 1650px 779px 0 0px rgba(255,255,255, 0.726) , 1580px 1748px 0 0px rgba(255,255,255, 0.53) , 228px 373px 0 0px rgba(255,255,255, 0.83) , 1162px 676px 0 0px rgba(255,255,255, 0.782) , 1482px 1418px 0 0px rgba(255,255,255, 0.561) ,.........完整代码请登录后点击上方下载按钮下载查看
纯css打造太阳系行星运行轨迹图运动版

网友评论0

css实现图片五边形边框效果代码

div+css布局实现文字环绕成太阳形状代码

css实现炫酷ai按钮效果代码

vue3调用coze api实现简洁大气支持暗黑模式切换的ai聊天智能体代码

vue+css调用coze智能体api打造一个ai聊天框网页代码

css+div布局生成小学生汉字拼音字帖代码

bootstrap模仿qwen ai聊天对话代码

css+div布局实现ai应用类科技公司官网代码

bootstrap+vue实现聊天对话式收集用户信息代码

css实现文字发光白天与黑夜两种模式切换代码
