html的地球特效代碼示例代碼

雲端運算與程式碼 2023年05月15日 11:03 1.1K+ 訪客

以下是一個使用 HTML 和 CSS 實現地球特效的示例代碼：

html的地球特效代碼示例代碼第1张

<!DOCTYPE html>
<html>
  <head>
    <title>Earth Effect</title>
    <style>
      #earth {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        border-radius: 50%;
        background: #0077be;
        box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.4);
        animation: earth 10s linear infinite;
      }
      #earth:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
        border-radius: 50%;
        background: #ffffff;
      }
      @keyframes earth {
        from {
          transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
        }
        to {
          transform: rotate3d(1, 0, 0, 360deg) rotate3d(0, 1, 0, 360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="earth"></div>
  </body>
</html>

該代碼使用了 HTML 和 CSS 語言來實現。其中的元素和語法如下：

- #earth: CSS選擇器，用來選中 id 為 "earth" 的 HTML 元素。在本例中，這是繪制地球特效的主要元素。

- position: 設置元素的定位方式。"absolute" 表示元素的位置相對於文檔正常流定位後的最近的祖先元素（非 static 定位）。

- top/left: 設置元素的頂部和左側位置，用於將地球元素定位在屏幕的中心位置。

- width/height: 設置元素的寬度和高度。

- margin: 設置元素外部周圍留白的大小。這裏使用了負值來將地球元素水平和垂直都居中。

- border-radius: 設置元素的邊框半徑，用於將矩形元素渲染為圓形。

- background: 設置元素的背景顏色。

- box-shadow: 為元素添加陰影效果。該屬性由一組的陰影值來定義，具體格式為 "x y blur color"。

- animation: 為元素添加動畫效果。該屬性定義了一個動畫的名稱、持續時間和重復方式。

- :after: CSS偽元素，用於在 HTML 元素的後面添加一個虛擬元素。在本例中，這是用來繪制地圖在地球表面上的效果。

- content: 設置虛擬元素的內容值。