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

代码语言:html

所属分类:动画

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

代码标签: 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),1086px 1357px 0 0 rgba(255,255,255,0.409),68px 1180px 0 0 rgba(255,255,255,0.614),373px 404px 0 0 rgba(255,255,255,0.018),369px 537px 0 0 rgba(255,255,255,0.502),918px 1306px 0 0 rgba(255,255,255,0.364),1113px 1145px 0 0 rgba(255,255,255,0.504),1605px 1054px 0 0 rgba(255,255,255,0.292),1604px 1071px 0 0 rgba(255,255,255,0.859),1224px 1577px 0 0 rgba(255,255,255,0.514),1596px 1181px 0 0 rgba(255,255,255,0.872),104px 378px 0 0 rgba(255,255,255,0.436),55px 1641px 0 0 rgba(255,255,255,0.188),528px 1291px 0 0 rgba(255,255,255,0.374),458px 593px 0 0 rgba(255,255,255,0.1),1148px 237px 0 0 rgba(255,255,255,0.18),1523px 1341px 0 0 rgba(255,255,255,0.636),497px 389px 0 0 rgba(255,255,255,0.899),1532px 1508px 0 0 rgba(255,255,255,0.722),489px 1284px 0 0 rgba(255,255,255,0.118),474px 163px 0 0 rgba(255,255,255,0.676),1392px 1027px 0 0 rgba(255,255,255,0.871),680px 1589px 0 0 rgba(255,255,255,0.213),960px 583px 0 0 rgba(255,255,255,0.713),962px 593px 0 0 rgba(255,255,255,0.177),1004px 222px 0 0 rgba(255,255,255,0.011),258px 234px 0 0 rgba(255,255,255,0.668),850px 568px 0 0 rgba(255,255,255,0.502),21px 142px 0 0 rgba(255,255,255,0.721),1587px 1481px 0 0 rgba(255,255,255,0.611),1192px 1243px 0 0 rgba(255,255,255,0.554),1524px 643px 0 0 rgba(255,255,255,0.46),711px 1268px 0 0 rgba(255,255,255,0.694),962px 272px 0 0 rgba(255,255,255,0.936),1030px 906px 0 0 rgba(255,255,255,0.033),1107px 462px 0 0 rgba(255,255,255,0.916),968px 1506px 0 0 rgba(255,255,255,0.649),1396px 457px 0 0 rgba(255,255,255,0.292),123px 1278px 0 0 rgba(255,255,255,0.459),1416px 698px 0 0 rgba(255,255,255,0.869),815px 1206px 0 0 rgba(255,255,255,0.506),272px 171px 0 0 rgba(255,255,255,0.671),1157px 1258px 0 0 rgba(255,255,255,0.769),1495px 520px 0 0 rgba(255,255,255,0.275),877px 1572px 0 0 rgba(255,255,255,0.315),247px 271px 0 0 rgba(255,255,255,0.685),995px 172px 0 0 rgba(255,255,255,0.355),1106px 658px 0 0 rgba(255,255,255,0.139),426px 1103px 0 0 rgba(255,255,255,0.673),749px 534px 0 0 rgba(255,255,255,0.589),273px 1351px 0 0 rgba(255,255,255,0.386),373px 1670px 0 0 rgba(255,255,255,0.237),884px 1164px 0 0 rgba(255,255,255,0.268),217px 260px 0 0 rgba(255,255,255,0.606),1701px 128px 0 0 rgba(255,255,255,0.98),759px 47px 0 0 rgba(255,255,255,0.37),500px 934px 0 0 rgba(255,255,255,0.125),1097px 1384px 0 0 rgba(255,255,255,0.006),1562px 787px 0 0 rgba(255,255,255,0.408),1519px 53px 0 0 rgba(255,255,255,0.008),594px 481px 0 0 rgba(255,255,255,0.934),1671px 173px 0 0 rgba(255,255,255,0.573),1032px 634px 0 0 rgba(255,255,255,0.247),789px 583px 0 0 rgba(255,255,255,0.908),891px 1216px 0 0 rgba(255,255,255,0.337),1540px 682px 0 0 rgba(255,255,255,0.083),503px 144px 0 0 rgba(255,255,255,0.854),1420px 854px 0 0 rgba(255,255,255,0.128),851px 219px 0 0 rgba(255,255,255,0.974),1116px 280px 0 0 rgba(255,255,255,0.401),1076px 508px 0 0 rgba(255,255,255,0.425),1115px 1278px 0 0 rgba(255,255,255,0.723),938px 901px 0 0 rgba(255,255,255,0.621),572px 893px 0 0 rgba(255,255,255,0.397),710px 1065px 0 0 rgba(255,255,255,0.73),921px 787px 0 0 rgba(255,255,255,0.191),571px 17px 0 0 rgba(255,255,255,0.5),348px 1016px 0 0 rgba(255,255,255,0.364),558px 1450px 0 0 rgba(255,255,255,0.266),1666px 1118px 0 0 rgba(255,255,255,0.478),1616px 787px 0 0 rgba(255,255,255,0.993),638px 39px 0 0 rgba(255,255,255,0.142),449px 1119px 0 0 rgba(255,255,255,0.458),67px 931px 0 0 rgba(255,255,255,0.948),1593px 936px 0 0 rgba(255,255,255,0.367),1551px 785px 0 0 rgba(255,255,255,0.806),1113px 463px 0 0 rgba(255,255,255,0.555),349px 477px 0 0 rgba(255,255,255,0.873),1438px 238px 0 0 rgba(255,255,255,0.471),1496px 928px 0 0 rgba(255,255,255,0.93),1467px 1423px 0 0 rgba(255,255,255,0.11),642px 608px 0 0 rgba(255,255,255,0.921),1740px 955px 0 0 rgba(255,255,255,0.731),1026px 724px 0 0 rgba(255,255,255,0.405),1528px 935px 0 0 rgba(255,255,255,0.171),1289px 586px 0 0 rgba(255,255,255,0.917),741px 848px 0 0 rgba(255,255,255,0.431),1325px 1657px 0 0 rgba(255,255,255,0.197),244px 393px 0 0 rgba(255,255,255,0.324),237px 1248px 0 0 rgba(255,255,255,0.064),1538px 465px 0 0 rgba(255,255,255,0.783),1095px 1420px 0 0 rgba(255,255,255,0.232),1400px 124px 0 0 rgba(255,255,255,0.597),1407px 1020px 0 0 rgba(255,255,255,0.512),1096px 1410px 0 0 rgba(255,255,255,0.074),1618px 972px 0 0 rgba(255,255,255,0.066),538px 1690px 0 0 rgba(255,255,255,0.328),582px 436px 0 0 rgba(255,255,255,0.557),107px 660px 0 0 rgba(255,255,255,0.061),419px 1146px 0 0 rgba(255,255,255,0.212),26px 989px 0 0 rgba(255,255,255,0.103),662px 753px 0 0 rgba(255,255,255,0.263),1708px 1243px 0 0 rgba(255,255,255,0.328),759px 1458px 0 0 rgba(255,255,255,0.06),327px 682px 0 0 rgba(255,255,255,0.356),1146px 1274px 0 0 rgba(255,255,255,0.176),1645px 1285px 0 0 rgba(255,255,255,0.478),948px 786px 0 0 rgba(255,255,255,0.713),1665px 891px 0 0 rgba(255,255,255,0.574),1430px 1588px 0 0 rgba(255,255,255,0.987),958px 1102px 0 0 rgba(255,255,255,0.624),1524px 1209px 0 0 rgba(255,255,255,0.382),1381px 287px 0 0 rgba(255,255,255,0.484),176px 1159px 0 0 rgba(255,255,255,0.667),1643px 686px 0 0 rgba(255,255,255,0.146),548px 1443px 0 0 rgba(255,255,255,0.46),1342px 478px 0 0 rgba(255,255,255,0.959),1390px 367px 0 0 rgba(255,255,255,0.377),1040px 1365px 0 0 rgba(255,255,255,0.529),1209px 1775px 0 0 rgba(255,255,255,0.55),526px 476px 0 0 rgba(255,255,255,0.29),374px 1609px 0 0 rgba(255,255,255,0.673),1320px 1429px 0 0 rgba(255,255,255,0.739),617px 753px 0 0 rgba(255,255,255,0.766),366px 860px 0 0 rgba(255,255,255,0.38),415px 615px 0 0 rgba(255,255,255,0.107),1516px 613px 0 0 rgba(255,255,255,0.189),1231px 788px 0 0 rgba(255,255,255,0.978),1534px 1101px 0 0 rgba(255,255,255,0.808),357px 208px 0 0 rgba(255,255,255,0.925),424px 692px 0 0 rgba(255,255,255,0.114),694px 153px 0 0 rgba(255,255,255,0.918),1245px 1317px 0 0 rgba(255,255,255,0.534),1004px 990px 0 0 rgba(255,255,255,0.243),346px 1635px 0 0 rgba(255,255,255,0.363),1543px 283px 0 0 rgba(255,255,255,0.398),981px 291px 0 0 rgba(255,255,255,0.46),1432px 1744px 0 0 rgba(255,255,255,0.064),845px 1046px 0 0 rgba(255,255,255,0.728),406px 1150px 0 0 rgba(255,255,255,0.675),295px 1106px 0 0 rgba(255,255,255,0.023),1663px 1032px 0 0 rgba(255,255,255,0.179),724px 1021px 0 0 rgba(255,255,255,0.793),1349px 1223px 0 0 rgba(255,255,255,0.296),820px 975px 0 0 rgba(255,255,255,0.714),291px 1009px 0 0 rgba(255,255,255,0.172),931px 685px 0 0 rgba(255,255,255,0.374),721px 1604px 0 0 rgba(255,255,255,0.298),520px 155px 0 0 rgba(255,255,255,0.275),847px 1474px 0 0 rgba(255,255,255,0.31),1624px 779px 0 0 rgba(255,255,255,0.271),1253px 1460px 0 0 rgba(255,255,255,0.314),1251px 289px 0 0 rgba(255,255,255,0.468),795px 28px 0 0 rgba(255,255,255,0.712),444px 496px 0 0 rgba(255,255,255,0.233),31px 858px 0 0 rgba(255,255,255,0.325),473px 880px 0 0 rgba(255,255,255,0.933),404px 1676px 0 0 rgba(255,255,255,0.144),535px 1646px 0 0 rgba(255,255,255,0.864),1144px 110px 0 0 rgba(255,255,255,0.347),1700px 639px 0 0 rgba(255,255,255,0.652),1136px 1029px 0 0 rgba(255,255,255,0.874),636px 387px 0 0 rgba(255,255,255,0.929),463px 438px 0 0 rgba(255,255,255,0.111),222px 922px 0 0 rgba(255,255,255,0.613),1277px 1712px 0 0 rgba(255,255,255,0.699),1228px 727px 0 0 rgba(255,255,255,0.305),167px 880px 0 0 rgba(255,255,255,0.344),678px 202px 0 0 rgba(255,255,255,0.391),1248px 1487px 0 0 rgba(255,255,255,0.14),1023px 186px 0 0 rgba(255,255,255,0.214),602px 1205px 0 0 rgba(255,255,255,0.745),1604px 817px 0 0 rgba(255,255,255,0.504),1627px 1639px 0 0 rgba(255,255,255,0.247).........完整代码请登录后点击上方下载按钮下载查看

网友评论0