CSS HTML Cursor

游標是我們在網頁上的一個常見交互工具，對於網站的交互體驗和視覺效果都有著非常大的作用。在 HTML 和 CSS 中有很多不同的方式來改變和控制游標的形狀和狀態。本文將從多個方面對 CSS HTML Cursor 這個話題進行詳細的闡述。

一、游標狀態

在 CSS 中，我們可以通過 cursor 屬性來控制游標的狀態，該屬性支持以下值：

  cursor: auto; /* 默認游標 */
  cursor: default; /* 默認游標，通常是箭頭 */
  cursor: pointer; /* 手型游標，用於表示鏈接 */
  cursor: wait; /* 等待狀態，通常是小時表 */
  cursor: help; /* 幫助狀態，通常是問號和箭頭 */
  cursor: text; /* 文本狀態，通常是游標豎線 */
  cursor: move; /* 移動狀態，通常是四向箭頭 */
  cursor: col-resize; /* 左右調整大小（列） */
  cursor: row-resize; /* 上下調整大小（行） */
  cursor: n-resize; /* 向上調整大小 */
  cursor: e-resize; /* 向右調整大小 */
  cursor: s-resize; /* 向下調整大小 */
  cursor: w-resize; /* 向左調整大小 */
  cursor: ne-resize; /* 右上調整大小 */
  cursor: nw-resize; /* 左上調整大小 */
  cursor: se-resize; /* 右下調整大小 */
  cursor: sw-resize; /* 左下調整大小 */
  cursor: crosshair; /* 十字准心 */

上述狀態都是常用的游標狀態，使用時按照需要進行選擇即可。

二、游標的自定義

在 CSS 中，我們也可以自定義游標的樣式，通過 url() 函數給 cursor 屬性賦值來實現。

  cursor: url('example.com/my-cursor.gif'), auto;

上述代碼將自定義游標的圖像文件鏈接（比如 .gif, .png 等）作為 url() 函數參數傳遞給 cursor 屬性，後面的 auto 則是游標的默認狀態。如果游標圖像不能被載入，則會顯示默認的游標狀態。

三、游標的動畫

有時我們需要為游標添加一些動態效果，比如在特定操作中改變游標樣式。在 CSS3 中，我們通過 @keyframes 規則加 cursor 屬性來實現游標的動畫效果。

  @keyframes spin {
    from { cursor: pointer; }
    to { cursor: wait; }
  }

  .my-element {
    animation: spin 2s infinite;
  }

上述代碼定義了一個名為 spin 的關鍵幀動畫，從游標類型為 pointer 開始，到 wait 結束，然後將其應用於 class 為 my-element 的 HTML 元素中，並設置了動畫時長為 2 秒，重複次數為無限循環。

總而言之，控制和自定義游標樣式是優化網站交互體驗的重要組成部分。通過使用上述方法，我們可以更好的滿足用戶需求，同時使網站更生動有趣。