如何在网站上制作动画光标

Question

I've tried CSS cursor property

how to create a cursor like this webpage

https://my.pottermore.com/patronus

Answer 1

You can create such effects using css and 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> 

This code can be found at: http://www.javascriptkit.com/script/script2/sparkler.shtml

OR if you do not want to use any HTML elements for your mouse trails you can use the following CSS and 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; } 

This Code Can be found at : https://codepen.io/falldowngoboone/pen/PwzPYv