CSS 中的三角形光标效果不起作用

Question

我是一个完全的初学者，不知道自己在做什么，并试图在我的工作中使用 CSS 和 JavaScript 为我们的网站创建自定义光标效果。一切工作正常，除了我无法创建三角形。我读过有关使用边框的文章，但决定尝试不同的方法，但它不起作用。代码附在下面。谁能告诉我我做错了什么？

body {             
 width: 30%;
 padding-bottom: 21.27%; /* = width / 1.41 */
 position: relative;
 overflow: hidden;
     
}                 

#myCustomCursor {             
position: fixed; 
width: 100%;             
height: 100%;             
background: #CC2FFA; 
top: var(--y, 0);             
left: var(--x, 0);             
transform-origin: 0 100%;
transform: rotate(45deg);  
transform: skew(20%);
transform: translate(-50%, -50%);           
mix-blend-mode: difference;             
pointer-events: none;             
z-index: 99999;       
}                  

#myCustomCursor.myCursorHoverState {             
  width: 160px;
  height: 160px;
  background: blue;
}

Answer 1

这是因为你同时使用两者，

transform: rotate(45deg);

transform: translate(-50%, -50%); 

。在您的情况下，后一个（

transform: translate(-50%, -50%);

）会覆盖旋转变换（

transform: rotate(45deg);

）。您可以通过将两个值添加到一行并用空格分隔来解决此问题。即：

transform: translate(-50%, -50%) rotate(45deg) ;

您可以从以下答案中了解更多相关信息。

旋转和平移