CSS中的圆圈未使用javascript跟随鼠标移动

在CSS中，可以使用伪元素和动画来实现圆圈跟随鼠标移动的效果，而不需要使用JavaScript。下面是一个实现该效果的示例代码：

HTML代码：

<div class="circle"></div>

CSS代码：

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: followMouse 1s infinite;
}

@keyframes followMouse {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(calc(-50% + var(--mouse-x)), calc(-50% + var(--mouse-y)));
  }
}

body {
  --mouse-x: 0;
  --mouse-y: 0;
}

body:hover {
  --mouse-x: calc((100vw - 50px) / 100);
  --mouse-y: calc((100vh - 50px) / 100);
}

上述代码中，通过设置.circle元素的position: absolute属性，使其脱离文档流，并通过top和left属性将其定位在页面的中心位置。然后，使用transform属性和translate函数将其水平和垂直居中。

接下来，通过animation属性和@keyframes规则创建一个名为followMouse的动画。该动画在0%和100%的关键帧中分别设置了初始位置和最终位置，通过calc函数结合--mouse-x和--mouse-y变量来实现跟随鼠标移动的效果。

在body元素中，使用CSS变量--mouse-x和--mouse-y来存储鼠标的位置信息。通过将这两个变量设置为鼠标相对于视口宽度和高度的百分比，实现了鼠标移动时圆圈跟随的效果。

最后，通过将body元素的hover伪类选择器与--mouse-x和--mouse-y变量结合使用，使得圆圈在鼠标悬停在页面上时跟随鼠标移动。

这种实现方式不需要使用JavaScript，只使用了CSS和HTML来实现圆圈跟随鼠标移动的效果。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS服务：腾讯云提供的云计算服务之一，用于提供可靠、高效的CSS服务，帮助用户快速构建和部署网站。
• 腾讯云动画服务：腾讯云提供的云计算服务之一，用于提供高效、稳定的动画服务，帮助用户实现各种动画效果。
• 腾讯云静态网站托管：腾讯云提供的云计算服务之一，用于提供高可用、高性能的静态网站托管服务，帮助用户快速部署和管理静态网站。 请注意，以上仅为示例，实际使用时应根据具体需求选择适合的腾讯云产品。