CSS transform translate 和 scale 交互

Question

我有一个跟随普通鼠标光标的自定义光标，因此我希望将它翻译成 -50%，这样它的原点就是指针。但是，我也希望光标在悬停在 link 或图像时放大，但我似乎无法融合两者。我可以让它变大但不是来自指针，或者来自指针但不会变大。有谁知道解决这个问题的方法是什么？这可能是我忽略的事情。提前致谢！

#cursor {
   width: 13px;
   height: 13px;
   border: 1px solid #373839;
   position: fixed;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: transform 0.3s ease, scale 0.3s ease, background 0.3s ease, top 0.056s ease, left 0.056s ease;
}

.linkHover {
   transform: scale(1.5);
   background-color: #373839;
}

Answer 1

您只需要为 #cursor 设置一个额外的规则：

transform-origin: top left;

此外，在 .linkHover 中，如果将它们应用于同一元素，请确保保留 translate：

.linkHover {
   transform: translate(-50%, -50%) scale(1.5);
   background-color: #373839;
}

CSS transform translate 和 scale 交互

CSS transform translate and scale interaction

javascript

html

css

cursor

transform