创建光标

可以使用CSS的@keyframes规则来创建光标闪烁动画。

code

html
<div class="custom-cursor"></div>

css
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  animation: blink 0.5s infinite alternate;
  z-index: 9999;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

在这个例子中，我们创建了一个名为“custom-cursor”的div元素，并将其定位在屏幕的左上角。我们给它一个黑色的背景和圆形边框，并使用border-radius属性将其圆形化。

我们然后使用animation属性将“blink”动画应用于该元素。在“blink”动画中，我们使用@keyframes规则定义了光标的闪烁效果。在0％时，光标完全不透明；在100％时，光标完全透明。

最后，我们将z-index属性设置为9999，以确保光标始终显示在其他元素的顶部。

请注意，此代码将创建一个简单的光标，但您可以根据需要进行更改和自定义。

当然手写光标需要注意

1. 当没有实际值，只有placeholder值，需要光标在前
2. 当有实际值，光标需要在值后2px左右