HTML5太陽系代碼是一種基于HTML5技術的網頁代碼,可用于展示太陽系和其各個行星的簡單動畫和交互效果。這種代碼使用各種HTML5元素和標簽來繪制不同大小和顏色的行星,以及運動和旋轉的動畫效果。
下面是一段HTML5太陽系代碼的示例,使用了pre標簽來展示代碼:
<style> #sun { background-color: yellow; width: 80px; height: 80px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; } #mercury { background-color: gray; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -5px; animation: rotate-mercury 10s linear infinite; } #venus { background-color: orange; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -7.5px; animation: rotate-venus 15s linear infinite; } #earth { background-color: blue; width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -10px; animation: rotate-earth 20s linear infinite; } #mars { background-color: red; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -7.5px; animation: rotate-mars 25s linear infinite; } #jupiter { background-color: brown; width: 40px; height: 40px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -20px; animation: rotate-jupiter 30s linear infinite; } #saturn { width: 60px; height: 60px; border: 1px solid brown; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -30px; animation: rotate-saturn 35s linear infinite; } #saturn .ring { background-color: transparent; width: 80px; height: 15px; border: 1px solid brown; border-radius: 50%; position: absolute; left: 50%; top: 18px; margin-left: -40px; } #uranus { background-color: lightblue; width: 25px; height: 25px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -12.5px; animation: rotate-uranus 40s linear infinite; } #neptune { background-color: darkblue; width: 25px; height: 25px; border-radius: 50%; position: absolute; left: 50%; top: 0; margin-left: -12.5px; animation: rotate-neptune 45s linear infinite; } @keyframes rotate-mercury { from { transform: rotate(0); top: 0; } to { transform: rotate(360deg); top: 80px; } } //省略動畫代碼... </style> <div id="sun"></div> <div id="mercury"></div> <div id="venus"></div> <div id="earth"></div> <div id="mars"></div> <div id="jupiter"></div> <div id="saturn"> <div class="ring"></div> </div> <div id="uranus"></div> <div id="neptune"></div>
這段代碼使用了不同的HTML5元素和標簽,如div、style、animation和keyframes等,來呈現一個簡單的太陽系動畫。每個行星都有特定的顏色、大小和旋轉周期,根據太陽的位置進行動態計算。此外,代碼中還使用了CSS3的動畫效果來使不同行星圍繞太陽旋轉,使動畫效果更加逼真。
總的來說,HTML5太陽系代碼可以為網頁添加生動和有趣的元素,同時也可以展示HTML5技術的強大功能和靈活性。對于喜歡太空和科學的人來說,這種代碼可以在他們瀏覽網頁時提供一些額外的收獲。
上一篇html5奶茶店代碼
下一篇html5太極代碼