css实现太阳系行星运行轨迹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现太阳系行星运行轨迹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
*,*: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:69px 1739px 0 0 rgba(255,255,255,0.191),420px 1153px 0 0 rgba(255,255,255,0.782),883px 1225px 0 0 rgba(255,255,255,0.272),956px 127px 0 0 rgba(255,255,255,0.201),1215px 509px 0 0 rgba(255,255,255,0.279),1535px 281px 0 0 rgba(255,255,255,0.672),1502px 1200px 0 0 rgba(255,255,255,0.682),493px 144px 0 0 rgba(255,255,255,0.651),1646px 1019px 0 0 rgba(255,255,255,0.557),415px 618px 0 0 rgba(255,255,255,0.365),1597px 1439px 0 0 rgba(255,255,255,0.863),976px 73px 0 0 rgba(255,255,255,0.923),1353px 707px 0 0 rgba(255,255,255,0.322),922px 293px 0 0 rgba(255,255,255,0.413),1225px 888px 0 0 rgba(255,255,255,0.979),1770px 912px 0 0 rgba(255,255,255,0.031),465px 1541px 0 0 rgba(255,255,255,0.201),1446px 1702px 0 0 rgba(255,255,255,0.155),1481px 1694px 0 0 rgba(255,255,255,0.734),1059px 1474px 0 0 rgba(255,255,255,0.69),1359px 104px 0 0 rgba(255,255,255,0.231),427px 51px 0 0 rgba(255,255,255,0.972),550px 1646px 0 0 rgba(255,255,255,0.786),388px 401px 0 0 rgba(255,255,255,0.976),1163px 1502px 0 0 rgba(255,255,255,0.453),463px 966px 0 0 rgba(255,255,255,0.666),1385px 1492px 0 0 rgba(255,255,255,0.287),165px 586px 0 0 rgba(255,255,255,0.921),1180px 1701px 0 0 rgba(255,255,255,0.815),1478px 1395px 0 0 rgba(255,255,255,0.505),1787px 1208px 0 0 rgba(255,255,255,0.948),115px 335px 0 0 rgba(255,255,255,0.762),424px 1663px 0 0 rgba(255,255,255,0.579),220px 107px 0 0 rgba(255,255,255,0.844),477px 281px 0 0 rgba(255,255,255,0.386),1492px 1088px 0 0 rgba(255,255,255,0.964),195px 1607px 0 0 rgba(255,255,255,0.417),262px 649px 0 0 rgba(255,255,255,0.635),888px 99px 0 0 rgba(255,255,255,0.73),1281px 295px 0 0 rgba(255,255,255,0.56),886px 890px 0 0 rgba(255,255,255,0.167),1623px 1010px 0 0 rgba(255,255,255,0.871),323px 1192px 0 0 rgba(255,255,255,0.46),949px 1699px 0 0 rgba(255,255,255,0.4),1337px 1350px 0 0 rgba(255,255,255,0.813),1230px 1278px 0 0 rgba(255,255,255,0.404),1450px 471px 0 0 rgba(255,255,255,0.151),993px 645px 0 0 rgba(255,255,255,0.401),1397px 108px 0 0 rgba(255,255,255,0.647),1758px 562px 0 0 rgba(255,255,255,0.727),809px 859px 0 0 rgba(255,255,255,0.415),1161px 15px 0 0 rgba(255,255,255,0.727),555px 652px 0 0 rgba(255,255,255,0.744),848px 329px 0 0 rgba(255,255,255,0.339),401px 825px 0 0 rgba(255,255,255,0.15),177px 724px 0 0 rgba(255,255,255,0.334),1435px 1543px 0 0 rgba(255,255,255,0.605),1759px 1741px 0 0 rgba(255,255,255,0.599),939px 982px 0 0 rgba(255,255,255,0.768),1582px 935px 0 0 rgba(255,255,255,0.2),1113px 1503px 0 0 rgba(255,255,255,0.033),708px 1738px 0 0 rgba(255,255,255,0.668),260px 817px 0 0 rgba(255,255,255,0.046),1750px 1347px 0 0 rgba(255,255,255,0.847),1535px 1070px 0 0 rgba(255,255,255,0.678),779px 1502px 0 0 rgba(255,255,255,0.867),264px 456px 0 0 rgba(255,255,255,0.635),964px 293px 0 0 rgba(255,255,255,0.507),823px 1623px 0 0 rgba(255,255,255,0.681),1689px 330px 0 0 rgba(255,255,255,0.767),1727px 795px 0 0 rgba(255,255,255,0.753),1364px 1590px 0 0 rgba(255,255,255,0.638),1552px 246px 0 0 rgba(255,255,255,0.7),161px 425px 0 0 rgba(255,255,255,0.822),843px 1288px 0 0 rgba(255,255,255,0.566),618px 1099px 0 0 rgba(255,255,255,0.063),409px 826px 0 0 rgba(255,255,255,0.826),1417px 1313px 0 0 rgba(255,255,255,0.728),318px 14px 0 0 rgba(255,255,255,0.023),1362px 747px 0 0 rgba(255,255,255,0.041),1280px 952px 0 0 rgba(255,255,255,0.432),1176px 110px 0 0 rgba(255,255,255,0.037),1439px 1603px 0 0 rgba(255,255,255,0.836),1502px 620px 0 0 rgba(255,255,255,0.32),317px 118px 0 0 rgba(255,255,255,0.406),1761px 1717px 0 0 rgba(255,255,255,0.488),264px 1115px 0 0 rgba(255,255,255,0.525),1752px 1349px 0 0 rgba(255,255,255,0.704),1746px 1522px 0 0 rgba(255,255,255,0.354),895px 657px 0 0 rgba(255,255,255,0.136),1400px 289px 0 0 rgba(255,255,255,0.633),952px 1128px 0 0 rgba(255,255,255,0.479),1168px 139px 0 0 rgba(255,255,255,0.517),1022px 196px 0 0 rgba(255,255,255,0.932),48px 690px 0 0 rgba(255,255,255,0.224),107px 1476px 0 0 rgba(255,255,255,0.085),1391px 205px 0 0 rgba(255,255,255,0.793),1192px 264px 0 0 rgba(255,255,255,0.369),1002px 648px 0 0 rgba(255,255,255,0.747),1755px 1162px 0 0 rgba(255,255,255,0.633),566px 1561px 0 0 rgba(255,255,255,0.161),1424px 1576px 0 0 rgba(255,255,255,0.354),965px 1593px 0 0 rgba(255,255,255,0.449),285px 1097px 0 0 rgba(255,255,255,0.341),1276px 1568px 0 0 rgba(255,255,255,0.619),255px 699px 0 0 rgba(255,255,255,0.153),1183px 1353px 0 0 rgba(255,255,255,0.456),897px 1491px 0 0 rgba(255,255,255,0.127),123px 135px 0 0 rgba(255,255,255,0.307),248px 994px 0 0 rgba(255,255,255,0.243),1028px 1044px 0 0 rgba(255,255,255,0.52),1251px 130px 0 0 rgba(255,255,255,0.479),1458px 1149px 0 0 rgba(255,255,255,0.35),1100px 1675px 0 0 rgba(255,255,255,0.221),670px 1009px 0 0 rgba(255,255,255,0.256),5px 645px 0 0 rgba(255,255,255,0.025),176px 304px 0 0 rgba(255,255,255,0.231),877px 922px 0 0 rgba(255,255,255,0.002),75px 1016px 0 0 rgba(255,255,255,0.454),862px 673px 0 0 rgba(255,255,255,0.211),1237px 223px 0 0 rgba(255,255,255,0.252),1524px 381px 0 0 rgba(255,255,255,0.567),163px 1773px 0 0 rgba(255,255,255,0.701),1360px 1226px 0 0 rgba(255,255,255,0.921),206px 1390px 0 0 rgba(255,255,255,0.755),1293px 971px 0 0 rgba(255,255,255,0.952),258px 1314px 0 0 rgba(255,255,255,0.693),1232px 1158px 0 0 rgba(255,255,255,0.586),1112px 517px 0 0 rgba(255,255,255,0.306),1307px 1402px 0 0 rgba(255,255,255,0.445),38px 472px 0 0 rgba(255,255,255,0.627),820px 1270px 0 0 rgba(255,255,255,0.114),236px 382px 0 0 rgba(255,255,255,0.71),929px 182px 0 0 rgba(255,255,255,0.579),1727px 286px 0 0 rgba(255,255,255,0.734),726px 533px 0 0 rgba(255,255,255,0.245),532px 1673px 0 0 rgba(255,255,255,0.56),341px 143px 0 0 rgba(255,255,255,0.63),233px 1488px 0 0 rgba(255,255,255,0.22),372px 1762px 0 0 rgba(255,255,255,0.889),883px 566px 0 0 rgba(255,255,255,0.93),1588px 613px 0 0 rgba(255,255,255,0.3),136px 706px 0 0 rgba(255,255,255,0.279),1774px 1501px 0 0 rgba(255,255,255,0.053),714px 333px 0 0 rgba(255,255,255,0.529),837px 1258px 0 0 rgba(255,255,255,0.053),185px 1733px 0 0 rgba(255,255,255,0.081),1086.........完整代码请登录后点击上方下载按钮下载查看