如何制作类似 Pottermore 的动画光标

Question

我试过CSS游标属性

如何创建像这个网页一样的光标

https://my.pottermore.com/patronus

Answer 1

您可以使用 css 和 JavaScript 创建此类效果：

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

var nav = (!document.all || window.opera);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

document.onmousemove = get_mouse; 

function get_mouse(e)
{    
  x = (nav) ? e.pageX : event.clientX+standardbody.scrollLeft;
  y = (nav) ? e.pageY : event.clientY+standardbody.scrollTop;
  x += x_offset;
  y += y_offset;
  beam(1);     
}

function beam(n)
{
  if(n<5)
  {
    document.getElementById('div'+n).style.top=y+'px'
    document.getElementById('div'+n).style.left=x+'px'
    document.getElementById('div'+n).style.visibility='visible'
    n++;
    tmr=setTimeout("beam("+n+")",spd);
  }
  else
  {
     clearTimeout(tmr);
     fade(4);
  }   
} 

function fade(n)
{
  if(n>0) 
  {
    document.getElementById('div'+n).style.visibility='hidden'
    n--;
    tmr=setTimeout("fade("+n+")",spd);
  }
  else clearTimeout(tmr);
}

body{
overflow-x:hidden;
}

.s1
{
  position  : absolute;
  font-size : 10pt;
  color     : blue;
  visibility: hidden;
}

.s2
{
  position  : absolute;
  font-size : 18pt;
  color     : red;
 visibility : hidden;
}

.s3
{
  position  : absolute;
  font-size : 14pt;
  color     : gold;
 visibility : hidden;
}

.s4
{
  position  : absolute;
  font-size : 12pt;
  color     : lime;
 visibility : hidden;
}

<div id="div1" class="s1">*</div>
<div id="div2" class="s2">*</div>
<div id="div3" class="s3">*</div>
<div id="div4" class="s4">*</div>

此代码可在以下位置找到：http://www.javascriptkit.com/script/script2/sparkler.shtml

或者如果您不想为鼠标轨迹使用任何 HTML 元素，您可以使用以下 CSS 和 JS：

var dots = [],
    mouse = {
      x: 0,
      y: 0
    };

var Dot = function() {
  this.x = 0;
  this.y = 0;
  this.node = (function(){
    var n = document.createElement("div");
    n.className = "tail";
    document.body.appendChild(n);
    return n;
  }());
};
Dot.prototype.draw = function() {
  this.node.style.left = this.x + "px";
  this.node.style.top = this.y + "px";
};

for (var i = 0; i < 12; i++) {
  var d = new Dot();
  dots.push(d);
}

function draw() {
  var x = mouse.x,
      y = mouse.y;
  
  dots.forEach(function(dot, index, dots) {
    var nextDot = dots[index + 1] || dots[0];
    
    dot.x = x;
    dot.y = y;
    dot.draw();
    x += (nextDot.x - dot.x) * .6;
    y += (nextDot.y - dot.y) * .6;

  });
}

addEventListener("mousemove", function(event) {
  mouse.x = event.pageX;
  mouse.y = event.pageY;
});

function animate() {
  draw();
  requestAnimationFrame(animate);
}

animate();

.tail {
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: tomato;
  }

此代码可在以下位置找到：https://codepen.io/falldowngoboone/pen/PwzPYv

如何制作类似 Pottermore 的动画光标

How to make Pottermore-like animated cursor

html

javascript

css

jquery

mouse-cursor