CSS鼠標十字架是一種非常有用的效果，它可以在網頁中很好地指示用戶的鼠標位置。下面我們來看一下如何實現 CSS 鼠標十字架。

.cursor {
height: 100%;
width: 100%;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.cursor:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-color: #fff;
border: 2px solid #000;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: all ease .15s;
z-index: 9999;
}
.cursor:hover:before {
width: 80px;
height: 80px;
}

我們可以看到，在 CSS 中使用偽類選擇器來實現對鼠標位置的控制。在 `.cursor` 類中，我們首先設置了其高度和寬度為 100%，并將 `pointer-events` 屬性設置為 none （無效）。這樣做是因為我們希望鼠標事件不會被覆蓋，而是可以直接傳遞給下面的元素。同時設置了 `position: fixed`、`top: 0` 和 `left: 0`，這可以使其始終位于頁面的最上方。最后設置了 `z-index` 屬性，這可以表示我們想讓其顯示在頁面中的哪一個層級。

然后，在 `.cursor:before` 偽類中，我們設置了產生在鼠標十字架的樣式，采用的是絕對定位和 `transform` 屬性。 `.cursor:hover:before` 部分的代碼控制鼠標十字架在鼠標懸停時的變化，這里使用 `width` 和 `height` 屬性控制寬度和高度。