Step 1: js file (if you want to change the trailing effect at will, just change the picture pointed by the arrow. Pay attention to the path!!!)
Step 2: Set css (note: this step cannot be omitted)
---------------------------Show results:
--------------------All codes:
<!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>Document</title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<script>
//Declare a variable to count
var count = 0;
//The movement time is triggered when the mouse moves relative to the document
document.onmousemove = function (e) {
// Control the number of times generated pictures
count++;
if (count % 5 == 0) {
//Initial size of the picture
var size1 = 50;
//Create an image
var img = document.createElement("img");
//Picture path
img.src = "../image/mz.png"
img.style.width = size1 + "px"
//Get the distance the mouse position moves to the picture
img.style.left = e.clientX - size1 / 2 + "px";
img.style.top = e.clientY - size1 / 2 + "px";
//Generate pictures
document.body.appendChild(img)
// Create a timer every 100 millisecond picture size reduction 5
var id = setInterval(function () {
size1 -= 5
img.style.width = size1 + "px"
to be positioned at the center of the picture
img.style.left = img.offsetLeft + 1 + "px"
img.style.topimg.offsetTop + 1 + "px"
}, 100)
// Delete the created picture to clear the timer after one second of the countdown
var st = setTimeout(function () {
clearInterval(id)
img.remove()
}, 1000)
}
}
</script>
</body>
</html>