<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5实现太阳系星球演示效果</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css" charset="utf-8">
<style>
html {
overflow: hidden;
}
.hidden {
display:none;
}
#spinner {
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
height:50px;
width:50px;
background:url('img/spinner.gif') no-repeat;
}
</style>
</head>
<body class="system">
<div id="starfield"> </div>
<div id="spinner"></div>
<img id="glow" src="img/glow.png">
<div id="title">
<h1 class="franchise"><span class="marketing">The</span>Planetarium</h1>
<span id="subtitle" class="carto">代码提供：脚本之家 jb51.net</span> </div>
<div id="instructions" class="carto loading"> click on a planet to start </div>
<div id="toggle-credits" class="loading"> <span class="marketing">view credits</span> </div>
<div id="door">
<div></div>
<div></div>
</div>
<div id="doorlight">
<div></div>
<div></div>
</div>
<div id="authors">
<p id="guillaume"> <span class="marketing">design by</span> <span class="bebas">Guillaume Lecollinet</span> <span class="carto"><a target="_blank" href="http://twitter.com/glecollinet/" title="follow Guillaume on Twitter">@glecollinet</a></span> </p>
<p id="franck"> <span class="marketing">code by</span> <span class="bebas">Franck Lecollinet</span> <span class="carto"><a target="_blank" href="http://twitter.com/whatthefranck/" title="follow Franck on Twitter">@whatthefranck</a></span> </p>
</div>
<section id="typefaces">
<header> <span class="separator"></span> <span id="title-hr" class="marketing">typefaces</span> <span class="separator"></span> </header>
<ul>
<li class="carto">Marketing Script <br/>
<span>by</span> <a href="http://www.steffmann.de/" target="_blank" title="Dieter Steffmann">Dieter Steffmann</a></li>
<li class="carto">Franchise <br/>
<span>by</span> <a href="http://www.derekweathersbee.com/" target="_blank" title="Derek Weathersbee">Derek Weathersbee</a></li>
<li class="carto">Bebas <br/>
<span>by</span> <a href="http://dharmatype.com/flat-it" target="_blank" title="Flat-it Type Foundry">Flat-it</a></li>
<li class="carto">CartoGothic Std <br/>
<span>by</span> <a href="http://www.fontsite.com/" target="_blank" title="FontSite Inc.">FontSite Inc.</a></li>
</ul>
</section>
</section>
<ul id="planets" class="loading">
<li id="mercury" class="planet"></li>
<li id="venus" class="planet"></li>
<li id="earth" class="planet"></li>
<li id="mars" class="planet"></li>
<li id="jupiter" class="planet"></li>
<li id="saturn" class="planet"></li>
<li id="uranus" class="planet"></li>
<li id="neptune" class="planet"></li>
</ul>
<div id="gui" class="shrink">
<div id="container"></div>
<div id="ruler"> </div>
<div id="counter"> <span class="carto">DISTANCE FROM THE SUN</span><br />
<span id="kilometers" class="bebas"></span> </div>
<div id="back"> <span class="carto">Back to space</span> </div>
<div id="moveleft">
<div id="previous"> <img src="img/previous.svg" alt="Previous planet"> </div>
</div>
<div id="moveright">
<div id="next"> <img src="img/previous.svg" alt="Next planet"> </div>
</div>
<section class="content hidden" id="mercury-info">
<article id="mercury-window" class="window">
<div class="reflect">
<h1 class="bebas"> Mercury </h1>
<p class="carto">is the first planet from the Sun and is also the smallest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system.</p>
</div>
</article>
<div id="mercury-missions">
<h2 class="bebas">Mercury Observation Progress</h2>
<ul>
<li><img src="img/mercuryobs1.png" alt=""></li>
<li><img src="img/mercuryobs2.png" alt=""></li>
<li><img src="img/mercuryobs3.png" alt=""></li>
</ul>
<img id="mariner10" src="img/mariner10.png" alt=""> <img id="techarrow" src="img/30years.png" alt=""> <img id="messenger" src="img/messenger.png" alt=""> </div>
</section>
<section class="content hidden" id="venus-info">
<article id="venus-window" class="window">
<div class="reflect">
<h1 class="bebas"> Venus </h1>
<p>is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar System.</p>
</div>
</article>
<ul id="venus-atmosphere" class="bebas">
<li>65 KM <span>-100°C</span> <span>Sulfuric Acid Cloud Layers</span> </li>
<li>50 KM <span>0°C</span> <span>Sulfuric Acid Haze</span> </li>
<li>38 KM <span>25°C</span> <span>Troposphere</span> </li>
<li>0 KM <span>467°C</span> <span>Surface Level</span> </li>
</ul>
</section>
<section class="content hidden" id="earth-info">
<article id="earth-window" class="window">
<div class="reflect">
<h1 class="bebas"> Earth </h1>
<p>is the third planet from the Sun, and the densest and fifth-largest of the eight planets in the Solar System. Sometimes referred to as the Blue Planet, Earth is the only known planet to harbor life.</p>
</div>
</article>
<div id="earth-moon" class="grid moon"> <img id="distance" src="img/distance.png" alt=""> </div>
<ul id="earth-facts" class="properties bebas">
<li class="mass"> <img src="img/mass.svg" alt="mass"> 5.9736 <small>x</small> 10<span class="exposant">24</span> kg <span>That's 80 times the mass of the moon</span> </li>
<li class="perimeter"> <img src="img/perimeter.svg" alt="perimeter"> 40,075,16 km <span>Equatorial circumference</span> </li>
<li class="revolution"> <img src="img/revolution.svg" alt="revolution"> 365 days <span>Complete Orbital Period</span> </li>
<li class="temperature"> <img src="img/temperature.svg" alt="temperature"> -89.2°C to 57.8°C <span>Temperature range</span> </li>
</ul>
</section>
<section class="content hidden" id="mars-info">
<article id="mars-window" class="window">
<div class="reflect">
<h1 class="bebas"> Mars </h1>
<p>is the fourth planet from the Sun. Named after the Roman god of war, Mars is often described as the "Red Planet" and is the site of Olympus Mons, the highest known mountain in the Solar System.</p>
</div>
</article>
<ul id="volcanoes" class="bebas">
<li>Olympus Mons<span>27,000 m</span>
<hr />
</li>
<li>Mount Everest<span>8,848 m</span>
<hr />
</li>
<li>Mount Fuji<span>3,776 m</span>
<hr />
</li>
</ul>
</section>
<section class="content hidden" id="jupiter-info">
<article id="jupiter-window" class="window">
<div class="reflect">
<h1 class="bebas"> Jupiter </h1>
<p> is the fifth planet from the Sun and is the largest planet of the Solar System. Jupiter has 63 known satellites, the biggest of which are called the four Galilean Moons : Io, Europa, Ganymede and Callisto.</p>
</div>
</article>
<ul id="jupiter-moons" class="properties bebas">
<li><img src="img/iopicto.png" alt=""> IO <span>Land of Volcanoes</span> </li>
<li><img src="img/europapicto.png" alt=""> EUROPA <span>Ice Ice Baby</span> </li>
<li><img src="img/ganymedepicto.png" alt=""> GANYMEDE <span>Larger than Mercury</span> </li>
<li><img src="img/callistopicto.png" alt=""> CALLISTO <span>The Habi
html5+css3实现太阳系星球逼真演示效果.zip
版权申诉
175 浏览量
2022-11-03
23:42:06
上传
评论
收藏 883KB ZIP 举报
html5+css3实现太阳系星球逼真演示效果.zip （61个子文件） 
132692072641918156 css 
lanrenzhijia.css 42KB img 
tweet-this.png 1KB glow.png 29KB saturn-arrow2.png 1KB
perimeter.svg 743B satellite.png 2KB
earth.jpg 77KB 30years.png 2KB uranus.png 93KB time.png 2KB mercuryobs2.png 3KB revolution.svg 1KB previous.svg 631B grid.png 1KB mercuryobs3.png 3KB mars.jpg 46KB messenger.png 5KB 246min.png 3KB everest.png 4KB ruler.png 1KB iopicto.png 2KB
spinner.gif 3KB saturn-arrow3.png 2KB distance.png 3KB jupiter.jpg 45KB wind.png 2KB rings1.png 4KB saturn.png 105KB saturn-arrow1.png 1KB venus.jpg 72KB mariner10.png 6KB mercury.jpg 69KB rings3.png 4KB tilt.png 4KB mercuryobs1.png 2KB earthicon.png 6KB tweet.png 945B neptune.jpg 18KB astronauts.png 6KB venussurface.png 4KB bg.jpg 17KB europapicto.png 2KB mass.svg 1KB voyager2.png 8KB temperature.svg 1KB rings2.png 5KB reflect.png 15KB ganymedepicto.png 2KB olympus.png 9KB fuji.png 2KB doorlight.png 4KB callistopicto.png 2KB shared mozilla-badge.js 77KB fonts Franchise-Bold.ttf 34KB CartoGothicStd-Book-webfont.woff 26KB MarketingScript.ttf 54KB BEBAS___-webfont.ttf 15KB CartoGothicStd-Book-webfont.ttf 47KB
index.html 12KB js main.min.js 77KB require-jquery-1.4.4.min.js 89KB资源评论
