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