我已经创建了一个光标使用html，css和JavaScript这是建立在这个网站上，现在的问题是光标移动，但不缩放

sqserrrh 于 11个月前发布在 Java

关注(0)|答案(1)|浏览(97)

我已经创建了一个光标使用html，css和JavaScript这是建立在this website现在的问题是光标是移动，但不像在这个网站上缩放缩小与光标移动我希望光标移动在这个网站上沿着缩小。我怎么才能使它？

document.addEventListener("DOMContentLoaded", function() {
    const cursor = document.querySelector(".custom-cursor");

    document.addEventListener("mousemove", function(e) {
        const x = e.clientX;
        const y = e.clientY;

        cursor.style.transform = `translate(${x}px, ${y}px)`;
    });
});

body {
    cursor: none; /* Hide the default cursor */
    margin: 0;
    overflow: hidden;
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: #ff0000; /* Choose your desired color */
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.2s ease-out;
    transform-origin: center;
}

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

JavaScript

来源：https://stackoverflow.com/questions/77738062/i-have-created-a-cursor-using-html-css-and-javascript-which-is-built-on-this-we

1条答案

按热度按时间

hmmo2u0o1#

也许是这样的东西？可能有点小故障

document.addEventListener("DOMContentLoaded", function() {
  const cursor = document.querySelector(".custom-cursor");
  let timeout = null;
  document.addEventListener("mousemove", function(e) {
    const x = e.clientX;
    const y = e.clientY;

    cursor.style.transform = `translate(${x}px, ${y}px) scale(0.8)`;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      cursor.style.transform = `translate(${x}px, ${y}px) scale(1.0)`;
    }, 100);
  });
});

body {
  cursor: none;
  /* Hide the default cursor */
  margin: 0;
  overflow: hidden;
}

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  /* Choose your desired color */
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s ease-out;
  transform-origin: center;
}

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

赞(0）回复(0）举报 11个月前

我来回答

我已经创建了一个光标使用html，css和JavaScript这是建立在这个网站上，现在的问题是光标移动，但不缩放

1条答案

相关问题

热门标签

最新问答