纯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 0.........完整代码请登录后点击上方下载按钮下载查看

纯css打造太阳系行星运行轨迹图运动版

网友评论0

css实现手风琴式图文人物介绍卡片折叠展开效果代码

js+css实现摄像头画面作为按钮材质反射的按钮交互效果代码

div+css布局实现热气腾腾咖啡效果代码

css+div布局实现立体质感电子锁按钮代码

css+div布局实现l立体质感checkbox开关效果代码

css实现空间立体文字卡片代码

dv+css布局实现冬季温暖的沙发客厅代码

tailwind+vue3+highlight实现一个ai聊天对话框页面代码

tailwindcss布局实现光线背影立体按钮效果代码

svg+css实现checkbox打钩选中美化代码