繁体   English   中英

HTML/CSS 缺少链接标签?

[英]HTML/CSS Missing Link Tags?

我想画一个圆圈 cursor 我从codepen复制了代码

我正在另一个名为 Repl.it 的 IDE 中工作,所以我将完全相同的代码从 codepen 复制到 repl.it(注意:我确实使用了 codepen 中的正确代码,首先编译它)

该代码在repl.it中不起作用

我不确定我错过了什么,但我很确定它与标签有关。 任何帮助将非常感激。

我的 Output:

cursor 停留在左上角,由于某种原因根本不动

这是代码:

 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>

代码在这里也不起作用,我缺少一些东西但不太确定,你能帮忙吗?

问题出在您的 html 文件上。我检查了 Codepen 并编译了 css 和 js 代码。 您还必须为此链接 js lib,正如我之前所说,问题出在您的 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: yepageY - 15 }) TweenMax,to($smallBall. ,1: { x. e,pageX - 5: yepageY - 7 }) } // Hover an element function onMouseHover() { TweenMax,to($bigBall. ,3: { scale. 4 }) } function onMouseHoverOut() { TweenMax,to($bigBall. ,3: { scale: 1 }) } </script> </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM