css正方形光标碰到会旋转缩小的动画效果代码

在CSS中创建一个正方形光标并且触碰时旋转并缩小的动画效果，你可以通过结合CSS `::before`伪元素、`transform`属性以及`transition`属性来实现。这是一个基本的示例：

/* 定义正方形光标的样式 */
.cursor-squares {
  display: inline-block;
  cursor: url(cursor-square.png), auto; /* 使用自定义光标图片 */
}

.cursor-squares::before {
  content: '';
  width: 50px; /* 正方形大小 */
  height: 50px;
  background-color: #ccc; /* 颜色可根据需要调整 */
  position: relative;
  transition: transform 0.3s ease-out; /* 动画过渡时间 */
}

/* 触碰时的动画效果 */
.cursor-squares:hover::before {
  transform: scale(0.8) rotate(-45deg); /* 缩小并顺时针旋转 */
}

在这个例子中，`.cursor-squares`类设置了自定义光标，并为其添加了一个`:before`伪元素作为缩放和旋转的主体。当鼠标悬停时，`:hover::before`选择器触发动画，将元素缩小到原来的80%并旋转-45度。

注意：你需要提供一个名为`cursor-square.png`的实际光标图片，将其替换为你的项目路径或URL。