HTML/CSS 缺少 Link 个标签？

Question

我想做一个圆形光标，我从codepen

复制了代码

我正在另一个名为 Repl.it 的 IDE 工作，所以我将完全相同的代码从 codepen 复制到 repl.it（注意：我确实通过编译使用了 codepen 中的正确代码首先）

代码在 repl.it

中无效

我不确定我遗漏了什么，但我很确定它与标签有关。任何帮助将不胜感激。

我的输出：

The cursor stays at the top left and does not move at all for some reason

这是代码：

const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
window.CP.exitedLoop(0);function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, .1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}

body {
  height: 100vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}
body h1,
body p,
body a {
  color: #fff;
}
body a {
  border-bottom: 2px solid #fff;
  padding: 10px 0;
  margin-top: 25px;
}
body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
body .left,
body .right {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .right {
  background: #fff;
}
body .right a {
  border-bottom: 2px solid #000;
}
body .right h1,
body .right p,
body .right a {
  color: #000;
}

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
  
  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>

<div class="left">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>  
</div>

<div class="right">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>  
</div>

代码在这里也不行，有一些我遗漏但不太确定的东西，你能帮忙吗？

Answer 1

问题出在您的 html 文件上。我检查了 Codepen 并编译了 css 和 js 代码。正如我之前所说，您还必须为此 link js 库，问题出在您的 html 文件中。

下面是工作代码享受!!

标记为已批准将不胜感激:)

body {
    height: 100vh;
    background: #010101;
    cursor: none;
    margin: 0;
    display: flex;
    font-family: monospace;
}

body h1, body p, body a {
    color: #fff;
}

body a {
    border-bottom: 2px solid #fff;
    padding: 10px 0;
    margin-top: 25px;
}

body .cursor {
    pointer-events: none;
}

body .cursor__ball {
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
    z-index: 1000;
}

body .cursor__ball circle {
    fill: #f7f8fa;
}

body .left, body .right {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body .right {
    background: #fff;
}

body .right a {
    border-bottom: 2px solid #000;
}

body .right h1, body .right p, body .right a {
    color: #000;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Cursor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="cursor">
        <div class="cursor__ball cursor__ball--big ">
            <svg height="30" width="30">
                <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
            </svg>
        </div>

        <div class="cursor__ball cursor__ball--small">
            <svg height="10" width="10">
                <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
            </svg>
        </div>
    </div>

    <div class="left">
        <h1>Hello</h1>
        <p>Check out this link:</p>
        <a class="hoverable">Hover meh</a>
    </div>

    <div class="right">
        <h1>Hello</h1>
        <p>Check out this link:</p>
        <a class="hoverable">Hover meh</a>
    </div>

</body>

<script>
    const $bigBall = document.querySelector('.cursor__ball--big');
    const $smallBall = document.querySelector('.cursor__ball--small');
    const $hoverables = document.querySelectorAll('.hoverable');

    // Listeners
    document.body.addEventListener('mousemove', onMouseMove);
    for (let i = 0; i < $hoverables.length; i++) {
        $hoverables[i].addEventListener('mouseenter', onMouseHover);
        $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
    }

    // Move the cursor
    function onMouseMove(e) {
        TweenMax.to($bigBall, .4, {
            x: e.pageX - 15,
            y: e.pageY - 15
        })
        TweenMax.to($smallBall, .1, {
            x: e.pageX - 5,
            y: e.pageY - 7
        })
    }

    // Hover an element
    function onMouseHover() {
        TweenMax.to($bigBall, .3, {
            scale: 4
        })
    }
    function onMouseHoverOut() {
        TweenMax.to($bigBall, .3, {
            scale: 1
        })
    }
</script>

</html>

HTML/CSS 缺少 Link 个标签？

HTML/CSS Missing Link Tags?

javascript

html

jquery

css

ide