前言
这个特效其实网上早就有了，只是最近在逛别人的博客(初's Blog)时候才看到，鼠标移动时会有炫彩的小星星跟随显示，也是一种蛮特别的，增加博客趣味性的效果。可以看到并没有用在博客上，因为移动端出现冲突，搭配起来也不合适。但是每个人博客是不一样的，或许正合适你。
效果预览
演示站：JS鼠标跟随特效
创建JS文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | /**
Template Name: 滑动小星星
Blog：https://mlldxe.cn/
author: _犬's
url: https://mlldxe.cn/archives/526
*/
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {
x: width / 2,
y: width / 2
};
var particles = [];
function init() {
bindEvents();
loop()
}
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize)
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight
}
function onTouchMove(e) {
if (e.touches.length > 0) {
for (var i = 0; i < e.touches.length; i++) {
addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)])
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)])
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle)
}
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].update()
}
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1)
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles()
}
function Particle() {
this.character = "*";
this.lifeSpan = 200;
this.initialStyles = {
"position": "fixed",
"top": "0",
"display": "block",
"pointerEvents": "none",
"z-index": "99999999",
"fontSize": "16px",
"will-change": "transform"
};
this.init = function (x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {
x: x - 10,
y: y - 20
};
this.initialStyles.color = color;
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element)
};
this.update = function () {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")"
}
this.die = function () {
this.element.parentNode.removeChild(this.element)
}
}
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key]
}
}
init()
})(); |
使用方法
添加这段代码（可压缩一下）
1 | <script src="https://blog.mlldxe.cn/cursor-effects.js"></script> |