html+ccs3太陽系行星運轉動畫

来源:http://www.cnblogs.com/kongxianghai/archive/2016/06/08/5568893.html
-Advertisement-
Play Games

做一個太陽系八大行星的運轉動畫，不包括行星的衛星，所有行星圍繞太陽公轉，行星採用純色，暫時沒有自轉。 效果靜態圖： 動畫中包括：太陽及各行星，運行軌道，行星公轉動畫。 先畫好草圖，設計好大小和位置，根據公轉周期計算好動畫執行的時間。 html的結構: 一個class為solarsys的div，作為太 ...


做一個太陽系八大行星的運轉動畫，不包括行星的衛星，所有行星圍繞太陽公轉，行星採用純色，暫時沒有自轉。

效果靜態圖：

 

動畫中包括：太陽及各行星，運行軌道，行星公轉動畫。

先畫好草圖，設計好大小和位置，根據公轉周期計算好動畫執行的時間。

 

html的結構:

一個class為solarsys的div，作為太陽系容器元素，該div的position為relative。

行星軌道和行星都用div，position為absolute。

容器用relative和內部元素採用absolute的定位方式，比較簡單的能實現效果，缺點就是大小是固定的。

    <div class="solarsys">
        <!--太陽-->
        <div class='sun'></div>

        <!--水星軌道-->
        <div class='mercuryOrbit'></div>

        <!--水星-->
        <div class='mercury'></div>

        <!--金星軌道-->
        <div class='venusOrbit'></div>

        <!--金星-->
        <div class='venus'></div>

        <!--地球軌道-->
        <div class='earthOrbit'></div>

        <!--地球-->
        <div class='earth'></div>

        <!--火星軌道-->
        <div class='marsOrbit'></div>

        <!--火星-->
        <div class='mars'></div>

        <!--木星軌道-->
        <div class='jupiterOrbit'></div>

        <!--木星-->
        <div class='jupiter'></div>

        <!--土星軌道-->
        <div class='saturnOrbit'></div>

        <!--土星-->
        <div class='saturn'></div>

        <!--天王星軌道-->
        <div class='uranusOrbit'></div>

        <!--天王星-->
        <div class='uranus'></div>

        <!--海王星軌道-->
        <div class='neptuneOrbit'></div>

        <!--海王星-->
        <div class='neptune'></div>
    </div>

 

太陽系容器div的css：

定寬，定高，relative定位，頁面內劇中對齊。

        .solarsys{
            width: 800px;
            height: 800px;;
            position: relative;
            margin: 0 auto;
            background-color: #000000;
            padding: 0;
            transform: scale(1);
        }

 

太陽div的css：

按照設計的大小和位置，設定寬高，left，top。

設定顏色。

通過把boder-radius生成50%，把一個正方形變成圓形。

通過box-shadow的4層顏色設置實現太陽光暈。

        .sun {
            left:357px;
            top:357px;
            height: 90px;
            width: 90px;
            background-color: rgb(248,107,35);
            border-radius: 50%;
            box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
            position: absolute;
            margin: 0;
        }

 

行星軌道div的css：

假設是水星軌道。

按照設計的大小和位置，設定寬高，left，top。

背景色透明。

通過把boder-radius生成50%，把一個正方形變成圓形。

boder的類型設成虛線。

boder的顏色設成灰色。

寬度設1。

        .mercuryOrbit {
            left:342.5px;
            top:342.5px;
            height: 115px;
            width: 115px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            margin: 0px;
            padding: 0px;
        }

 

行星div的css：

假設是水星。

按照設計的大小和位置，設定寬高，left，top。

設置顏色。

通過把boder-radius生成50%，把一個正方形變成圓形。

將transfrom-origin設定成當前div的左上角相對於整個太陽系容器的中心點的橫向和縱向的偏移量。加上旋轉動畫後就是圍繞著中心點旋轉效果。 

做一個animation，引用rotate關鍵幀動畫，線性永久執行，這裡的執行時長是根據行星的公轉周期計算出來。

        .mercury {
            left:337.5px;
            top:395px;
            height: 10px;
            width: 10px;
            background-color: rgb(166,138,56);
            border-radius: 50%;
            position: absolute;
            transform-origin: 62.5px 5px;
            animation: rotate 1.5s infinite linear;
        }

 

rotate關鍵幀動畫：

逆時針旋轉。

        @keyframes rotate {
            100% {
                transform: rotate(-360deg);
            }
        }

 

基本結構完成。

僅在chrome中測試過。

 

全部代碼：

<html>
<head>
    <style>
        .solarsys{
            width: 800px;
            height: 800px;;
            position: relative;
            margin: 0 auto;
            background-color: #000000;
            padding: 0;
            transform: scale(1);
        }

        /*太陽*/
        .sun {
            left:357px;
            top:357px;
            height: 90px;
            width: 90px;
            background-color: rgb(248,107,35);
            border-radius: 50%;
            box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
            position: absolute;
            margin: 0;
        }

        /*水星*/
        .mercury {
            left:337.5px;
            top:395px;
            height: 10px;
            width: 10px;
            background-color: rgb(166,138,56);
            border-radius: 50%;
            position: absolute;
            transform-origin: 62.5px 5px;
            animation: rotate 1.5s infinite linear;
        }

        /*水星軌道*/
        .mercuryOrbit {
            left:342.5px;
            top:342.5px;
            height: 115px;
            width: 115px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            margin: 0px;
            padding: 0px;
        }

        /*金星*/
        .venus {
            left:309px;
            top:389px;
            height: 22px;
            width: 22px;
            background-color: rgb(246,157,97);
            border-radius: 50%;
            position: absolute;
            transform-origin: 91px 11px;
            animation: rotate 3.84s infinite linear;
        }

        /*金星軌道*/
        .venusOrbit {
            left:320px;
            top:320px;
            height: 160px;
            width: 160px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*地球*/
        .earth {
            left:266.5px;
            top:391px;
            height: 18px;
            width: 18px;
            background-color: rgb(115,114,174);
            border-radius: 50%;
            position: absolute;
            transform-origin: 134px 9px;
            animation: rotate 6.25s infinite linear;
        }

        /*地球軌道*/
        .earthOrbit {
            left:275px;
            top:275px;
            height: 250px;
            width: 250px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*火星*/
        .mars {
            left:222.5px;
            top:392.5px;
            height: 15px;
            width: 15px;
            background-color: rgb(140,119,63);
            border-radius: 50%;
            position: absolute;
            transform-origin: 177.5px 7.5px;
            animation: rotate 11.75s infinite linear;
        }

         /*火星軌道*/
        .marsOrbit {
            left:230px;
            top:230px;
            height: 340px;
            width: 340px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*木星*/
        .jupiter {
            left:134px;
            top:379px;
            height: 42px;
            width: 42px;
            background-color: rgb(156,164,143);
            border-radius: 50%;
            position: absolute;
            transform-origin: 266px 21px;
            animation: rotate 74.04s infinite linear;
        }

        /*木星軌道*/
        .jupiterOrbit {
            left:155px;
            top:155px;
            height: 490px;
            width: 490px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*土星*/
        .saturn {
            left:92px;
            top:387px;
            height: 26px;
            width: 26px;
            background-color: rgb(215,171,68);
            border-radius: 50%;
            position: absolute;
            transform-origin: 308px 13px;
            animation: rotate 183.92s infinite linear;
        }

        /*土星軌道*/
        .saturnOrbit {
            left:105px;
            top:105px;
            height: 590px;
            width: 590px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*天王星*/
        .uranus {
            left:41.5px;
            top:386.5px;
            height: 27px;
            width: 27px;
            background-color: rgb(164,192,206);
            border-radius:
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 函數還能這樣玩兒～實現類似add(1)(2)(3)的函數
    人生的第一份前端工作找到了，感謝大神主子們給半路出家自學的我這麼多的機會，很高興正式踏上客觀又樂趣滿滿的程式員之路，哇咔咔咔。 ​ 分享一個準備面試時遇到的一個有趣的問題： 要求實現類似 調用方式的方法，例如add為加法函數，則調用 輸出3，調用 輸出9。 ​ 函數的調用方式是多次調用同一個函數，將 ...
  • sublime_text編輯器下載安裝使用
    1、sublime_text下載 https://www.sublimetext.com/3 （選擇相對應的版本） 2、通過package control安裝插件 https://packagecontrol.io/ （package control網站） 在sublime編輯器通過Ctrl+`打開 ...
  • 推薦21款最佳 HTML5 網頁游戲
    儘管 HTML5 的完全實現還有很長的路要走，但 HTML5 正在改變 Web，未來 HTML5 將把 Web 帶入一個更加成熟和開放的應用平臺。現在，越來越多的人嘗試用 HTML5 來製作網頁游戲等豐富的 Web 應用。今天要與大家分享的是 21 款基於 HTML5 的游戲，讓大家體驗一下 HTM ...
  • 模擬多級覆選框效果--jquery
    今天又次體會到jquery的強大了，做了個多級覆選框的效果，代碼總共就20+行就over了。 我又想用js來做一個看看，才寫了幾個方法就寫不動了，相容性要考慮很多，而且代碼量直線上升。 主要分享下jquery的這個效果的實現。代碼塊分兩塊： 一是全選的效果，就是點擊全選的覆選框時它的子孫都相應被選中 ...
  • JS原生Ajax,GET和POST
    javascript/js的ajax的GET請求： <script type="text/javascript"> /* 創建 XMLHttpRequest 對象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpReque ...
  • HTML的checkbox和radio的美化
    checkbox和radio的美化 checkbox： <style type="text/css"> input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: inline-block; ...
  • JavaScript:面向對象
    面向對象的一個標誌是它們都有類的概念，而JavaScript中沒有類的概念，因此它的對象與其他語言基於類的對象定義不同。 理解對象 前面介紹過對象的兩種創建方式：構造函數和對象字面量： var p = new Object(); p.name = "蕭蕭弈寒"; p.blog = "cnblogs. ...
  • 【小月博客】 Html5 上傳圖片 移動端、PC端通用
    在博客園註冊賬號有些天了，感覺有些許欣慰，自己寫的東西有人在看，有人在評論很是開心。（ps： 滿足一下虛榮心吧！） 廢話不多說了，說一下今天給大家分享的是 html5上傳圖片。我們是在移動端使用的，但是這個在pc上也通用相容性我只在谷歌測試過。之前一直用的angular寫的《用HTML5的File ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類