用css做一個旋轉的地球儀

阿新 • • 發佈：2019-02-05

html部分:

<body>
    <div class="hoder"></div>
    <div class="circle"></div>
    <div class="circle equator"></div>
    <div class="circle weft1"></div>
    <div class="circle weft2"></div>
    <div class="circle weft3"></div>
    < 
div class="circle weft3"></div>
    <div class="circle weft4"></div>
    <div class="hoder2"></div>
    <div class="bottom"></div>
    <div class="bottom2"></div>
</body>

球的部分是將div的邊框置為圓形

將圓圈進行3D旋轉,就得到一個選裝的透視球

transform: rotateX(70deg) translateZ(

70px);

這個是將圓圈平躺下,做成赤道的樣子

其餘的weft是緯線,通過3D的Y軸變換得到

然後再做靜態的支架即可

執行結果如下:

原始碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>努力做個地球儀</title>
    <style>
        body{
            background-color: black;
        }
        .circle{
            border-radius 
: 100%;
            height: 100px;
            width: 100px;
            left: 200px;
            top: 200px;
            position: absolute;
            border: 1px solid #394057;
            transform-style: preserve-3d;
        }
        .equator{
            top:260px;
            transform: rotateX(70deg) translateZ(70px)
        }
        .weft1{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft1;
        }
        .weft2{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft2;
        }
        .weft3{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft3;
        }
        .weft4{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft4;
        }
        .hoder{
            height: 159px;
            width: 100px;
            left: 150px;
            top: 180px;
            position: absolute;
            border-right:2px solid #394057 ;
        }
        .hoder2{
            border-radius: 100%;
            border-left:3px solid #394057 ;
            height: 140px;
            width: 140px;
            top:180px;
            left: 180px;
            position: absolute;
        }
        .bottom{
            height:100px;
            width: 100px;
            border-radius: 100%;
            left: 200px;
            top: 355px;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(70deg) translateZ(70px);
            z-index: -100;
            border:2px solid #394057 ;
        }
        .bottom2{
            height:10px;
            width: 10px;
            border-radius: 100%;
            left: 244px;
            top: 397px;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(70deg) translateZ(70px);
            z-index: -100;
            border:2px solid #394057 ;

        }
        @-webkit-keyframes weft1{
            from{
                -webkit-transform:rotateY(40deg);
            }
            to{
                -webkit-transform:rotateY(400deg);
            }
        }
        @-webkit-keyframes weft2{
            from{
                -webkit-transform:rotateY(80deg);
            }
            to{
                -webkit-transform:rotateY(440deg);
            }
        }
        @-webkit-keyframes weft3{
            from{
                -webkit-transform:rotateY(120deg);
            }
            to{
                -webkit-transform:rotateY(480deg);
            }
        }
        @-webkit-keyframes weft4{
            from{
                -webkit-transform:rotateY(160deg);
            }
            to{
                -webkit-transform:rotateY(520deg);
            }
        }
    </style>
</head>
<body>
    <div class="hoder"></div>
    <div class="circle"></div>
    <div class="circle equator"></div>
    <div class="circle weft1"></div>
    <div class="circle weft2"></div>
    <div class="circle weft3"></div>
    <div class="circle weft3"></div>
    <div class="circle weft4"></div>
    <div class="hoder2"></div>
    <div class="bottom"></div>
    <div class="bottom2"></div>
</body>
</html>

用css做一個旋轉的地球儀

html部分:<body> <div class="hoder"></div> <div class="circle"></div> <div class="circle equator

用css做一個旋轉的球

我們都知道,球無論怎麼旋轉,無論從哪個角度看過去都是圈形所以,只要我們將球表面的圖案圍繞著球心轉動,看起來就是球在轉動point 是將裡面的元素進行3D旋轉,使之有一個躺下的效果face face2 是兩隻眼睛圍繞的中心html部分:<div class="bg"&g

怎麽用cookie做一個選項卡？

eight splay i++ 作用 code round tab 多網站個性化什麽是cookie? Cookies雖然一般都以英文名呈現，但是它還是有一個可愛的中文名“小甜餅”。Cookies是指服務器暫存放在你的電腦裏的txt格式的文本文件資料，主要用

繞過010Editor網絡驗證（用python做一個仿真http server真容易，就幾行代碼）

headers redirect 如果 table 本地 align cnn 破解版 resp 010Editor是一款非常強大的十六進制編輯器，尤其是它的模板功能在分析文件格式時相當好用！網上現在也有不少010Editor的破解版，如果沒錢或者舍不得花錢買授權的話，去官方

星期四、星期五、星期一—用GUI做一個簡易的交易系統

his 換行巧克力 cal show .get ner 文本域 array 1、登錄界面 package org.eclipse.wb.swing; //登錄界面 import java.awt.BorderLayout;import java.awt.EventQue

用vue做一個酷炫的menu

方法 tar ges enter 導入 count https 簡單 ren 寫在前面最近看到一個非常酷炫的menu插件，一直想把它鼓搗成vue形式，誰讓我是vue的死灰粉呢，如果這都不算愛??。??開個小玩耍，我們一起來探索黑魔法吧。觀看本教程的讀者需要

【python基礎】用字典做一個小型的查詢數據庫

import oot 字符 odin 參數錯誤 err 輸出 put 異常例子來源於《python基礎教程》第三版，57p 該例子主要是使用字典的方式，實現一個小型的數據庫，通過查詢字典的鍵值來獲取用戶的信息。本人修改了部分代碼。 #!/usr/bin/python3

Effective前端1---chapter 2 用CSS畫一個三角形

-- 前端 highlight ive 類元 light sha 畫法兩個 1.CSS畫三角形的畫法第一步：三角形可以用border畫出來，首先一個有四個border的div長這樣： <div class="triangle"></div>

懶人動手，用python做一個基礎翻譯重新命名器（破解百度翻譯反爬手段）

想法：在做開發的時候，經常需要命名各種變數，方法/函式，類，包，庫等。走一遍流程就是：想好要起的名字，比如“非常帥氣”；然後上翻譯網站，比如百度翻譯，有道翻譯；將中文輸入並讓其翻譯成英文，此時就得出一個“very handsome”的單詞；根據駝峰命名法，我們最後需要得

用 Vue 做一個簡單的購物app

有意思應用程序其中 ins com 簡單的 node.js 引入大神前言最近在學習Vue的使用。看了官方文檔之後，感覺挺有意思的。於是著手做了一個簡單的購物app。這是我第一次在這個網站上寫分享，如有不當之處，請多多指教。一整個項目寫下來，最大的感覺就是組件式開

用java做一個簡單的打字遊戲

Java也是可以做桌面程式的。只不過需要執行在裝有JDK的電腦環境上，所以應用不是很廣泛，但是用來提高自身的程式碼邏輯還是可以的！偶有一天看到金山的打字通，就想起何不做個簡單的打字遊戲用來練練手。於是就有了下文首先建一個類MyTyping，只有main方法執行main方法

用HTML5做一個個人網站，此文僅展示個人主頁介面。內附原始碼下載地址

html5 ，用css去修飾自己的個人主頁程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

用列表做一個登入系統功能實現:註冊與登入系統

list1=[]# 儲存使用者名稱 list2=[] #儲存密碼 while True: print('歡迎來到登入頁面') print('1:登入\n2:註冊\n3:退出') xz = int(input('請選擇:')) if xz ==

發現電腦上還裝著liteide,就用golang做一個TCP通訊測試

1、參考https://www.cnblogs.com/yin5th/p/9274495.html server端 main.go package main import ( "fmt" "net" ) func main() { // simple t

前端每日實戰5.用 CSS 創作一個立體滑動 toggle 互動控制元件

原文地址：https://segmentfault.com/a/1190000014638655 HTML程式碼： <html> <head> <link rel="stylesheet" href="index.css"&g

[Python] 用python做一個遊戲輔助指令碼，完整思路

一、說明　　簡述：本文將以4399小遊戲《寵物連連看經典版2》作為測試案例，通過識別小圖示，模擬滑鼠點選，快速完成配對。對於有興趣學習遊戲指令碼的同學有一定的幫助。　　執行環境：Win10/Python3.5。　　主要模組：win32gui（識別視窗、視窗置頂等操作）、PIL（螢幕截圖）、nump

用CSS實現一個抽獎轉盤

效果基本是用CSS實現的，沒有用圖片，加一丟丟JS。完全沒有考慮相容性。首先畫一個轉盤， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

用CSS寫一個簡單的幻燈片效果頁面

fill for tar mode stat xpl fir ng- 語法規則這裏是修真院前端小課堂，每篇分享文從【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】八個方面深度解析前端知識/技能，本篇分享的是：【用CSS

用 css 做圖形（圖示）

在前端開發中，你或多或少都會接觸到css圖形。之前我整理過偽元素&偽類的內容，為的就是更加熟悉瞭解它們，以便更好的使用它們。同時也也使用它一做了一些動畫。 css3-animate。這裡說的用css做圖形，其實是使用一個html元素，結合它的偽元素 ::before &

HTML+CSS做一個個人簡歷

程式碼： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset=utf-8" /> <title>簡歷&l

用css做一個旋轉的地球儀

相關推薦