js special effects - trailing effect of mouse sliding
<script>
//鼠标移动事件(document范围内移动)
document.onmousemove=function(event){
//1、创建div
var _div=document.createElement("div");
//生成随机的宽高
var random=Math.floor(Math.random()*30)+10;
_div.style.width=random+"px";//节点宽度
_div.style.height=random+"px";//节点高度
_div.style.borderRadius="50%";//圆形
_div.style.backgroundColor=randomColor();//随机背景色
//2、定位div
_div.style.position="absolute";
_div.style.left=(event.clientX-random/2)+"px";//左边距
_div.style.top=(event.clientY-random/2)+"px";//右边距
//3、追加div
document.body.appendChild(_div);
//4、延迟删除div
setTimeout(function(){
_div.remove();
},500)
}
//生成随机颜色
function randomColor(){
var random1=Math.floor(Math.random()*256);
var random2=Math.floor(Math.random()*256);
var random3=Math.floor(Math.random()*256);
return `rgb(${
random1},${
random2},${
random3})`;
}
</script>
Renderings: