CSS3实现太阳星系运转特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现太阳星系运转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

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

<head>
<title>CSS3实现太阳星系运转特效</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/styles.css" />
</head>
<body>
<div class="wrap clearfix">

    <section class="clearfix">
  
        <ul class="solarsystem">
			<li class="sun"><a href="#sun"><span>Sun</span></a></li>
			<li class="mercury"><a href="#mercury"><span>Mercury</span></a></li>
			<li class="venus"><a href="#venus"><span>Venus</span></a></li>
			<li class="earth"><a href="#earth"><span>Earth<span class="moon"> &amp; 
			Moon</span></span></a></li>
			<li class="mars"><a href="#mars"><span>Mars</span></a></li>
			<li class="asteroids_meteorids"><span>Asteroids &amp; Meteorids</span></li>
			<li class="jupiter"><a href="#jupiter"><span>Jupiter</span></a></li>
			<li class="saturn"><a href="#saturn"><span>Saturn &amp;
			<span class="ring">Ring</span></span></a></li>
			<li class="uranus"><a href="#uranus"><span>Uranus</span></a></li>
			<li class="neptune"><a href="#neptune"><span>Neptune</span></a></li>
			<li class="pluto"><a href="#pluto"><span>Pluto</span></a></li>
	</ul>
	<ul id="descriptions">
		<li>
		<h2 id="sun">Sun</h2>
		<p>The Sun is a star, a hot ball of glowing gases at the heart of our solar 
		system. Its influence extends far beyond the orbits of distant Neptune and 
		Pluto. Without the Sun&#39;s intense energy and heat, there would be no life 
		on Earth. And though it is special to us, there are billions of stars like 
		our Sun scattered across the Milky Way galaxy.</p>
		</li>
		<li>
		<h2 id="mercury">Mercury</h2>
		<p>Sun-scorched Mercury is only slightly larger than Earth&#39;s Moon. Like 
		the Moon, Mercury has very little atmosphere to stop impacts and it is covered 
		with craters. Mercury&#39;s dayside is super heated by the Sun, but at night 
		temperatures drop hundreds of degrees below freezing. Ice may even exist 
		in craters. Mercury&#39;s egg-shaped orbit takes it around the Sun every 88 
		days.</p>
		</li>
		<li>
		<h2 id="venus">Venus</h2>
		<p>Venus is a dim world of intense heat and volcanic activity. Similar in 
		structure and size to Earth, Venus&#39; thick, toxic atmosphere traps heat in 
		a runaway &#39;greenhouse effect.&#39; The scorched world has temperatures hot enough 
		to melt lead. Glimpses below the clouds reveal volcanoes and deformed mountains. 
		Venus spins slowly in the opposite direction of most planets.</p>
		</li>
		<li>
		<h2 id="earth">Earth</h2>
		<p>Earth is an ocean planet. Our home world&#39;s abundance of water - and life 
		- makes it unique in our solar system. Other planets, plus a few moons, 
		have ice, atmospheres, seasons and even weather, but only on Earth does 
		the whole complicated mix come together in a way that encourages life - 
		and lots of it.</p>
		</li>
		<li>
		<h2 id="mars">Mars</h2>
		<p>Though details of Mars&#39; surface are difficult to see from Earth, telescope 
		observations show seasonally changing features and white patches at the 
		poles. For decades, people speculated that bright and dark areas on Mars 
		were patches of vegetation, that Mars could be a likely place for life-forms, 
		and that water might exist in the polar caps. When the Mariner 4 spacecraft 
		flew by Mars in 1965, many were shocked to see photographs of a bleak, cratered 
		surface. Mars seemed to be a dead planet. Later missions, however, have 
		shown that Mars is a complex member of the solar system and holds many mysteries 
		yet to be solved.</p>
		</li>
		<li>
		<h2 id="jupiter">Jupiter</h2>
		<p>The most massive planet in our solar system, with four large moons and 
		many smaller moons, Jupiter forms a kind of miniature solar system. Jupiter 
		resembles a star in composition. In fact, if it had been about 80 times 
		more massive, it would have become a star rather than a planet.</p>
		</li>
		<li>
		<h2 id="saturn">Saturn</h2>
		<p>Saturn was the most distant of the five planets known to the ancients. 
		Like Jupiter, Saturn is made mostly of hydrogen and helium. Its volume is 
		755 times greater than that of Earth. Winds in the upper atmosphere reach 
		500 meters (1,600 feet) per second in the equatorial region. These super-fast 
		winds, combined with heat rising from within the planet&#39;s interior, cause 
		the yellow and gold bands visible in the atmosphere.</p>
		</li>
		<li>
		<h2 id="uranus">Uranus</h2>
		<p>The first planet found with the aid of a telescope, Uranus was discovered 
		in 1781 by astronomer William Herschel. The seventh planet from the Sun 
		is so distant that it takes 84 years to complete one orbit.</p>
		</li>
		<li>
		<h2 id="neptune">Neptune</h2>
		<p>Nearly 4.5 billion kilometers (2.8 billion miles) from the Sun, Neptune 
		orbits the Sun once every 165 years. It is invisible to the naked eye because 
		of its extreme distance from Earth. Interestingly, the unusual elliptical 
		orbit of the dwarf planet Pluto brings Pluto inside Neptune&#39;s orbit for 
		a 20-year period out of every 248 Earth years</p>
		</li>
		<li>
		<h2 id="pluto">Pluto</h2>
		<p>Tiny, cold and incredibly distant, Pluto was discovered in 1930 and long 
		considered to be the ninth planet. But after the discoveries of similar 
		intriguing worlds even farther out, Pluto was reclassified as a dwarf planet. 
		This new class of worlds may offer some of the best evidence of the origins 
		of our solar system.</p>
		</li>
	</ul>
    </section>
  </div>
</body>
</html>

CSS代码(styles.css):

*{margin:0;padding:0;}
body{font:14px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;background:#080e24 url(bg.jpg) repeat;color:#626668;}
div.wrap{width:960px;margin:0 auto;padding:60px 0;}
a.about,a.twitter{display:block;position:fixed;bottom:20px;right:20px;background:#32312b;padding:7px 28px;text-decoration:none;color:#eee5a2;font-size:12px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-o-transition:all 0.15s ease-in;transition:all 0.15s ease-in;}
a.twitter{right:220px;}
a.about:hover,a.twitter:hover{background:#aa4200;color:#fff;}
section{display:block;position:relative;}
header{text-align:center;}
header h1{font-size:126px;line-height:1;color:#eee5a2;text-transform:uppercase;text-shadow:5px 5px #32312b;}
header p{font-size:24px;color:#6a695f;margin:0 0 10px;}
header p.disclaimer{font-size:13px;color:#33373d;}
/* Solar System Styles */
ul.solarsystem{position:relative;height:640px;list-style:none;-webkit-transition:all 0.09s ease-in;-moz-transition:all 0.09s ease-in;-o-transition:all 0.09s ease-in;transition:all 0.09s ease-in;overflow:hidden;}
ul.solarsystem li{text-indent:-9999px;display:block;position:absolute;border:2px solid #394057;/* opacity:0.7;*/
}
ul.solarsystem li span{display:block;position:absolute;width:10px;height:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
ul.solarsystem li.active{border-color:#aa4200;}
ul.solarsystem li.active.sun,ul.solarsystem li.active span{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
ul.solarsystem li.active.sun span,ul.solarsystem li.active.earth .moon{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
ul.solarsystem li.sun{width:40px;height:40px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#fc3;background-image:-webkit-gradient( linear,left bottom,left top,color-stop(0.22,rgb(204,153,0)),color-stop(1,rgb(255,219,112)) );background-image:-moz-linear-gradient( center bottom,rgb(204,153,0) 22%,rgb(255,219,112) 100% );top:302px;left:462px;border:none;-webkit-box-shadow:0 0 50px #c90;-moz-box-shadow:0 0 50px #c90;box-shadow:0 0 50px #c90;z-index:100;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
ul.solarsystem li.sun span{width:60px;height:60px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
ul.solarsystem li.mercury{width:100px;height:100px;-webkit-border-radius:52px;-moz-border-radius:52px;border-radius:52px;top:270px;left:430px;z-index:99;}
ul.solarsystem li.mercury span{background:#b6bac5;top:10px;left:10px;}
ul.solarsystem li.venus{width:160px;height:160px;-webkit-border-radius:82px;-moz-border-radius:82px;border-radius:82px;top:240px;left:400px;z-index:98;}
ul.solarsystem li.venus span{background:#bf8639;top:118px;left:5px;}
ul.solarsystem li.earth{width:220px;height:220px;-webkit-border-radius:112px;-moz-border-radius:112px;border-radius:112px;top:210px;left:370px;z-index:97;}
ul.solarsystem li.earth span{background:#06c;top:56px;left:5px;}
ul.solarsystem li.earth span.moon{width:4px;height:4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#ccc;top:12px;left:12px;}
ul.solarsystem li.mars{width:280px;height:280px;-webkit-border-radius:142px;-moz-border-radius:142px;border-radius:142px;top:180px;left:340px;z-index:96;}
ul.solarsystem li.mars span{background:#aa4200;top:0px;left:175px;}
ul.solarsystem li.asteroids_meteorids{top:155px;left:315px;z-index:1;background:url(asteroids_meteorids.png) no-repeat 0 0;width:330px;height:330px;-webkit-border-radius:165px;-moz-border-radius:165px;border-radius:165px;border:none;}
ul.solarsystem li.jupiter{width:340px;height:340px;-webkit-border-radius:172px;-moz-border-radius:172px;border-radius:172px;top:150px;left:310px;z-index:95;}
ul.solarsystem li.jupiter span{background:#e0ae6f;top:67px;left:24px;}
ul.solarsystem li.saturn{width:400px;height:400px;-webkit-border-radius:202px;-moz-border-radius:202px;border-radius:202px;top:120px;left:280px;z-index:94;}
ul.solarsystem li.saturn span{background:#dfd3a9;top:24px;left:300px;}
ul.solarsystem li.saturn span.ring{width:12px;height:12px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:none;border:2px solid #5a4e34;left:-3px;top:-3px;-webkit-transform:skewY(50deg);-moz-transform:skewY(50deg);-o-transform:skewY(50deg);transform:skewY(50deg);}
ul.solarsystem li.uranus{width:460px;height:460px;-webkit-border-radius:232px;-moz-border-radius:232px;border-radius:232px;top:90px;left:250px;z-index:93;}
ul.solarsystem li.uranus span{background:#82b3d1;top:7px;left:300px;}
ul.solarsystem li.neptune{width:520px;height:520px;-webkit-border-radius:262px;-moz-border-radius:262px;border-radius:262px;top:60px;left:220px;z-index:92;}
ul.solarsystem li.neptune span{background:#77c2ec;top:0px;left:200px;}
ul.solarsystem li.pluto{width:580px;height:580px;-webkit-border-radius:292px;-moz-border-radius:292px;border-radius:292px;top:30px;left:190px;z-index:91;}
ul.solarsystem li.pluto span{background:#7c6a5c;top:79px;left:79px;}
ul#descriptions{position:absolute;top:150px;right:100px;list-style:none;}
ul#descriptions h2{cursor:pointer;color:#386077;-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-o-transition:all 0.15s ease-in;transition:all 0.15s ease-in;font-size:20px;position:relative;z-index:101;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
ul#descriptions h2:hover{color:#aa4200;-webkit-transform:scale(1.08);-moz-transform:scale(1.08);-o-transform:scale(1.08);transform:scale(1.08);}
ul#descriptions li p{position:absolute;left:-250px;top:0;width:200px;display:inline;opacity:0;visibility:hidden;font-size:13px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;background:#0f132c;padding:30px;color:#767892;line-height:1.7;z-index:100;border:1px solid #1c203c;}
ul#descriptions h2:hover+p{visibility:visible;opacity:0.9;left:-280px;}
/* CSS3 Animations */
ul.solarsystem li{-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:orbit;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-moz-animation-name:orbit;}
ul.solarsystem li.earth span{-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:moon;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-moz-animation-name:moon;}
ul.solarsystem li.mercury{-webkit-animation-duration:5s;-moz-animation-duration:5s;}
ul.solarsystem li.venus{-webkit-animation-duration:8s;-moz-animation-duration:8s;}
ul.solarsystem li.earth{-webkit-animation-duration:12s;-moz-animation-duration:12s;}
ul.solarsystem li.earth span{-webkit-animation-duration:2s;-moz-animation-duration:2s;}
ul.solarsystem li.mars{-webkit-animation-duration:20s;-moz-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids{-webkit-animation-duration:50s;-moz-animation-duration:50s;}
ul.solarsystem li.jupiter{-webkit-animation-duration:30s;-moz-animation-duration:30s;}
ul.solarsystem li.saturn{-webkit-animation-duration:60s;-moz-animation-duration:60s;}
ul.solarsystem li.uranus{-webkit-animation-duration:70s;-moz-animation-duration:70s;}
ul.solarsystem li.neptune{-webkit-animation-duration:100s;-moz-animation-duration:100s;}
ul.solarsystem li.pluto{-webkit-animation-duration:120s;-moz-animation-duration:120s;}
@-webkit-keyframes orbit{from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes moon{from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes orbit{from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
@-moz-keyframes moon{from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
/*ul.solarsystem:hover li{-webkit-animation-play-state:paused;}
*/
/* iPad Specific */
@media only screen and (max-device-width:1024px){p.links{text-align:center;width:350px;margin:0 auto;}
a.about,a.twitter{position:static;text-align:left;margin:0 10px 0 0;float:left;}
}

附件:下载该文件资源,减少时间成本(增值服务)