前端开发 之 12个鼠标html" title=交互>交互特效上【附完整源码】
文章目录
- 前端开发 之 12个鼠标html" title=交互>交互特效上【附完整源码】
- 一:彩色空心爱心滑动特效
-
- 二:彩色实心爱心滑动特效
-
- 三:粒子连结特效
-
- 四:彩色拖尾特效
-
- 五:彩色粒子收回特效
-
- 六:彩色粒子html" title=交互>交互特效
-
一:彩色空心爱心滑动特效
1.效果展示
2.HTML
完整代码
html"><!doctype html>
<html>
<head><meta charset="utf-8"><title>超级炫酷的爱心滑动特效</title><style>css">body {overflow: hidden;margin: 0;background: #222;}canvas {display: block;}</style>
</head><body><canvas></canvas><script>html" title=javascript>javascript">var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");var ww, wh;function onResize() {ww = canvas.width = window.innerWidth;wh = canvas.height = window.innerHeight;}function randomColor() {return `hsla(${Math.random() * 360}, 100%, 60%, 1)`;}var precision = 100;var hearts = [];var mouseMoved = false;function onMove(e) {mouseMoved = true;for (let i = 0; i < 5; i++) { let x, y;if (e.type === "touchmove") {x = e.touches[0].clientX;y = e.touches[0].clientY;} else {x = e.clientX;y = e.clientY;}hearts.push(new Heart(x, y));}}var Heart = function (x, y) {this.x = x || Math.random() * ww;this.y = y || Math.random() * wh;this.size = Math.random() * 4 + 1;this.shadowBlur = Math.random() * 20;this.speedX = (Math.random() - 0.5) * 10;this.speedY = (Math.random() - 0.5) * 10;this.speedSize = Math.random() * 0.05 + 0.01;this.opacity = 1;this.color = randomColor();this.vertices = [];for (var i = 0; i < precision; i++) {var step = (i / precision - 0.5) * (Math.PI * 2);var vector = {x: (15 * Math.pow(Math.sin(step), 3)),y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))}this.vertices.push(vector);}}Heart.prototype.draw = function () {this.size -= this.speedSize;this.x += this.speedX;this.y += this.speedY;ctx.save();ctx.translate(this.x, this.y);ctx.scale(this.size, this.size);ctx.beginPath();ctx.strokeStyle = this.color;ctx.shadowBlur = this.shadowBlur;ctx.shadowColor = this.color;for (var i = 0; i < precision; i++) {var vector = this.vertices[i];ctx.lineTo(vector.x, vector.y);}ctx.globalAlpha = this.size;ctx.closePath();ctx.stroke();ctx.restore();};function render(a) {requestAnimationFrame(render);ctx.clearRect(0, 0, ww, wh);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();if (hearts[i].size <= 0) {hearts.splice(i, 1);i--;}}}onResize();window.addEventListener("mousemove", onMove);window.addEventListener("touchmove", onMove);window.addEventListener("resize", onResize);requestAnimationFrame(render);</script>
</body>
</html>
二:彩色实心爱心滑动特效
1.效果展示
2.HTML
完整代码
html"><!doctype html>
<html>
<head><meta charset="utf-8"><title>滑动爱心</title><style>css">body {overflow: hidden;margin: 0;background: linear-gradient(to right, #ff9a9e, #fad0c4);height: 100vh;display: flex;justify-content: center;align-items: center;}canvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><canvas></canvas><script>html" title=javascript>javascript">var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");var ww, wh;function onResize() {ww = canvas.width = window.innerWidth;wh = canvas.height = window.innerHeight;}var precision = 50;var hearts = [];var mouseMoved = false;function onMove(e) {mouseMoved = true;var x, y;if (e.type === "touchmove") {x = e.touches[0].clientX;y = e.touches[0].clientY;} else {x = e.clientX;y = e.clientY;}hearts.push(new Heart(x, y));}var Heart = function (x, y) {this.x = x || Math.random() * ww;this.y = y || Math.random() * wh;this.size = Math.random() * 2 + 1;this.maxSize = this.size * 1.5;this.shadowBlur = Math.random() * 15;this.speedX = (Math.random() - 0.5) * 4;this.speedY = (Math.random() - 0.5) * 4;this.alpha = 1;this.fadeSpeed = Math.random() * 0.02 + 0.02;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.vertices = [];for (var i = 0; i < precision; i++) {var step = (i / precision - 0.5) * (Math.PI * 2);var vector = {x: (15 * Math.pow(Math.sin(step), 3)),y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))}this.vertices.push(vector);}}Heart.prototype.draw = function () {this.x += this.speedX;this.y += this.speedY;this.size += (this.maxSize - this.size) * 0.1;this.alpha -= this.fadeSpeed;ctx.save();ctx.translate(this.x, this.y);ctx.scale(this.size, this.size);ctx.beginPath();ctx.moveTo(0, 0);for (var i = 0; i < precision; i++) {var vector = this.vertices[i];ctx.lineTo(vector.x, vector.y);}ctx.closePath();ctx.fillStyle = this.color;ctx.globalAlpha = this.alpha;ctx.shadowBlur = this.shadowBlur;ctx.shadowColor = this.color;ctx.fill();ctx.restore();};function render(a) {requestAnimationFrame(render);ctx.clearRect(0, 0, ww, wh);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();if (hearts[i].alpha <= 0) {hearts.splice(i, 1);i--;}}}onResize();window.addEventListener("mousemove", onMove);window.addEventListener("touchmove", onMove);window.addEventListener("resize", onResize);requestAnimationFrame(render);</script>
</body>
</html>
三:粒子连结特效
1.效果展示
2.HTML
完整代码
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Enhanced Particle System with Cool Effects</title><style>css">body {margin: 0;overflow: hidden;background: linear-gradient(45deg, #000, #333);animation: bgGradient 10s ease infinite;}@keyframes bgGradient {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}canvas {display: block;}</style>
</head>
<body><canvas id="particleCanvas"></canvas>
</body>
<script>html" title=javascript>javascript">
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;let particlesArray = [];
const numberOfParticles = 50;
const mouse = {x: undefined,y: undefined,
};
const maxParticleLifeTime = 1; class Particle {constructor(x, y, initialLife = 1) {this.x = x || Math.random() * canvas.width;this.y = y || Math.random() * canvas.height;this.size = Math.random() * 2 + 1;this.speedX = (Math.random() - 0.5) * 2;this.speedY = (Math.random() - 0.5) * 2;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.alpha = 1;this.decay = Math.random() * 0.01 + 0.01;this.life = initialLife;this.trail = [];this.lifeTime = 0; }update() {this.x += this.speedX;this.y += this.speedY;if (this.x > canvas.width || this.x < 0) this.speedX *= -1;if (this.y > canvas.height || this.y < 0) this.speedY *= -1;if (mouse.x && mouse.y) {const dx = mouse.x - this.x;const dy = mouse.y - this.y;const distance = Math.sqrt(dx * dx + dy * dy);const force = 1 / distance * 20;this.speedX += (dx / distance) * force;this.speedY += (dy / distance) * force;}this.life -= this.decay;this.alpha = this.life;this.color = `hsl(${(1 - this.life) * 360}, 100%, 50%)`;this.lifeTime += 1 / 60; if (this.life <= 0 || this.lifeTime >= maxParticleLifeTime) {this.reset();}this.trail.push({ x: this.x, y: this.y });if (this.trail.length > 15) this.trail.shift();for (let otherParticle of particlesArray) {if (otherParticle !== this) {const dx = this.x - otherParticle.x;const dy = this.y - otherParticle.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 50) {const repelForce = 0.1 / distance;this.speedX -= (dx / distance) * repelForce;this.speedY -= (dy / distance) * repelForce;}}}}draw() {ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();ctx.globalAlpha = 0.7 * this.alpha;ctx.beginPath();for (let i = 0; i < this.trail.length; i++) {ctx.lineTo(this.trail[i].x, this.trail[i].y);}ctx.strokeStyle = this.color;ctx.lineWidth = 0.5;ctx.stroke();ctx.closePath();}reset() {this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.size = Math.random() * 2 + 1;this.speedX = (Math.random() - 0.5) * 4;this.speedY = (Math.random() - 0.5) * 4;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.alpha = 1;this.life = 1;this.decay = Math.random() * 0.01 + 0.01;this.trail = [];this.lifeTime = 0;}
}function init() {particlesArray = [];for (let i = 0; i < numberOfParticles; i++) {particlesArray.push(new Particle());}
}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let particle of particlesArray) {particle.update();particle.draw();}requestAnimationFrame(animate);
}window.addEventListener('resize', function() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;init();
});window.addEventListener('mousemove', function(event) {mouse.x = event.x;mouse.y = event.y;
});window.addEventListener('mouseout', function() {mouse.x = undefined;mouse.y = undefined;
});window.addEventListener('click', function(event) {for (let i = 0; i < 30; i++) {const angle = Math.random() * 2 * Math.PI;const distance = Math.random() * 50;const x = event.x + Math.cos(angle) * distance;const y = event.y + Math.sin(angle) * distance;particlesArray.push(new Particle(x, y, 1));}
});init();
animate();
</script>
</html>
四:彩色拖尾特效
1.效果展示
2.HTML
完整代码
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1234</title><style>css">body, html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;background-color: #000;}#trail-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}.particle {position: absolute;width: 3px; height: 3px;background-color: #fff;border-radius: 50%;opacity: 1;transform: translate(-50%, -50%);pointer-events: none;mix-blend-mode: screen;}@keyframes fadeOut {0% { opacity: 1; }100% { opacity: 0; }}.particle.fade {animation: fadeOut 0.5s ease-out forwards; }</style>
</head>
<body><div id="trail-container"></div><script>html" title=javascript>javascript">document.addEventListener('DOMContentLoaded', () => {const trailContainer = document.getElementById('trail-container');const particles = [];document.addEventListener('mousemove', (e) => {createParticle(e.clientX, e.clientY);});function createParticle(x, y) {const particle = document.createElement('div');particle.classList.add('particle');particle.style.left = `${x}px`;particle.style.top = `${y}px`;particle.style.backgroundColor = getRandomColor();trailContainer.appendChild(particle);particles.push(particle);setTimeout(() => {particle.classList.add('fade');particle.addEventListener('animationend', () => {particle.remove();particles.splice(particles.indexOf(particle), 1);});}, 100); }function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}setInterval(() => {particles.forEach(particle => {if (particle.classList.contains('fade')) {particle.remove();particles.splice(particles.indexOf(particle), 1);}});}, 1000);});</script>
</body>
</html>
五:彩色粒子收回特效
1.效果展示
2.HTML
完整代码
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Enhanced Particle System with Gravity and Wind</title><style>css">body, html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}#particleCanvas {display: block;width: 100%;height: 100%;background: linear-gradient(to bottom, #000000, #111111);}</style>
</head>
<body><canvas id="particleCanvas"></canvas><script>html" title=javascript>javascript">const canvas = document.getElementById('particleCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const particlesArray = [];const numberOfParticles = 500; const mouse = {x: undefined,y: undefined,};const gravity = 0.05; const wind = {x: 0.01, y: 0,};class Particle {constructor() {this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.size = Math.random() * 5 + 1; this.speedX = (Math.random() - 0.5) * 4; this.speedY = (Math.random() - 0.5) * 4;this.color = 'hsl(' + Math.floor(Math.random() * 360) + ', 100%, 50%)';this.alpha = 1; this.targetX = this.x;this.targetY = this.y;this.ease = 0.05;}update() {if (mouse.x !== undefined && mouse.y !== undefined) {this.targetX = mouse.x;this.targetY = mouse.y;}this.x += (this.targetX - this.x) * this.ease;this.y += (this.targetY - this.y) * this.ease;this.speedY += gravity;this.speedX += wind.x;if (this.x > canvas.width || this.x < 0) this.speedX *= -1;if (this.y > canvas.height) this.y = canvas.height, this.speedY *= -0.7; this.alpha -= 0.01; if (this.alpha < 0) this.alpha = 0;this.draw();}draw() {ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();}}function init() {for (let i = 0; i < numberOfParticles; i++) {particlesArray.push(new Particle());}}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let particle of particlesArray) {particle.update();}requestAnimationFrame(animate);}window.addEventListener('resize', function() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});window.addEventListener('mousemove', function(event) {mouse.x = event.x;mouse.y = event.y;});window.addEventListener('mouseout', function() {mouse.x = undefined;mouse.y = undefined;});window.addEventListener('click', function() {for (let i = 0; i < 20; i++) {particlesArray.push(new Particle());}});init();animate();</script>
</body>
</html>
六:彩色粒子html" title=交互>交互特效
1.效果展示
2.HTML
完整代码
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩色粒子html" title=交互>交互特效</title>
</head>
<body>
<script>html" title=javascript>javascript">!(function () {function n(n, e, t) {return n.getAttribute(e) || t;}function e(n) {return document.getElementsByTagName(n);}function t() {var t = e("script"),o = t.length,i = t[o - 1];return {l: o,z: n(i, "zIndex", -1),o: n(i, "opacity", 0.6),c: n(i, "color", "0,255,0"), n: n(i, "count", 400), };}function o() {(a = m.width =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth),(c = m.height =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight);}function i() {r.clearRect(0, 0, a, c);var n, e, t, o, m, l;s.forEach(function (particle, index) {for (particle.x += particle.xa,particle.y += particle.ya,particle.xa *= particle.x > a || particle.x < 0 ? -1 : 1,particle.ya *= particle.y > c || particle.y < 0 ? -1 : 1,r.fillStyle = particle.color,r.fillRect(particle.x - 0.5, particle.y - 0.5, 1, 1),e = index + 1;e < u.length;e++) {(n = u[e]),null !== n.x &&null !== n.y &&((o = particle.x - n.x),(m = particle.y - n.y),(l = o * o + m * m),l < n.max &&(n === y &&l >= n.max / 2 &&((particle.x -= 0.03 * o), (particle.y -= 0.03 * m)),(t = (n.max - l) / n.max),r.beginPath(),(r.lineWidth = t / 2),r.strokeStyle = particle.color,r.moveTo(particle.x, particle.y),r.lineTo(n.x, n.y),r.stroke()));}}),x(i);}var fixedColors = ["rgba(255, 0, 0, 1.0)", "rgba(0, 255, 0, 1.0)", "rgba(0, 0, 255, 1.0)", "rgba(255, 255, 0, 1.0)", "rgba(0, 255, 255, 0.8)", "rgba(255, 0, 255, 0.8)", "rgba(255, 165, 0, 0.8)", "rgba(127, 255, 212, 1.0)","rgba(0, 255, 127, 1.0)"];var a,c,u,m = document.createElement("canvas"),d = t(),l = "c_n" + d.l,r = m.getContext("2d"),x =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (n) {window.setTimeout(n, 1e3 / 45);},w = Math.random,y = { x: null, y: null, max: 2e4 };(m.id = l),(m.style.cssText ="position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),e("body")[0].appendChild(m),o(),(window.onresize = o),(window.onmousemove = function (n) {(n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);}),(window.onmouseout = function () {(y.x = null), (y.y = null);});for (var s = [], f = 0; d.n > f; f++) {var h = w() * a,g = w() * c,v = 2 * w() - 1,p = 2 * w() - 1,color = fixedColors[Math.floor(Math.random() * fixedColors.length)];s.push({ x: h, y: g, xa: v, ya: p, max: 6e3, color: color }); }(u = s.concat([y])),setTimeout(function () {i();}, 100);})();</script>
</body>
</html>