前端开发 之 12个鼠标交互特效上【附完整源码】

server/2024/12/29 9:25:24/

前端开发 之 12个鼠标html" title=交互>交互特效上【附完整源码】

文章目录

  • 前端开发 之 12个鼠标html" title=交互>交互特效上【附完整源码】
      • 一:彩色空心爱心滑动特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 二:彩色实心爱心滑动特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 三:粒子连结特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 四:彩色拖尾特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 五:彩色粒子收回特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 六:彩色粒子html" title=交互>交互特效
          • 1.效果展示
          • 2.`HTML`完整代码

一:彩色空心爱心滑动特效

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>

http://www.ppmy.cn/server/152949.html

相关文章

精准提升:从94.5%到99.4%——目标检测调优全纪录

&#x1f680; 目标检测模型调优过程记录 在进行目标检测模型的训练过程中&#xff0c;我们面对了许多挑战与迭代。从初始模型的训练结果到最终的调优优化&#xff0c;每一步的实验和调整都有其独特的思路和收获。本文记录了我在优化目标检测模型的过程中进行的几次尝试&#…

如何在Windows系统上安装和配置Node.js及Node版本管理器(nvm)

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境&#xff0c;广泛用于开发高性能的网络应用。它使得JavaScript不仅能在浏览器端运行&#xff0c;还能在服务器端执行。对于开发者来说&#xff0c;Node.js是现代Web应用的核心之一。安装和配置Node.js后&#xff0c;很多开…

Blazor 直接读取并显示HTML 文件内容

如果你想在 Blazor 中直接读取 并显示HTML 文件&#xff0c;可以使用 .NET 的文件读取方法&#xff0c;比如 File.ReadAllText。Blazor Server&#xff08;服务端&#xff09;可以通过服务器的文件系统访问文件。 以下是针对 Blazor Server 的解决方案&#xff1a; 1. 使用 Fi…

鸿蒙学习记录之http网络请求

权限申请 路径为&#xff1a;entry -> src -> main -> module.json5 "requestPermissions": [{"name": "ohos.permission.INTERNET",}] 基本使用 // 1. 引入包名 import { http } from kit.NetworkKit;// 2. 创建一个HttpRequest对…

C++设计模式:享元模式 (附文字处理系统中的字符对象案例)

什么是享元模式&#xff1f; 享元模式是一个非常实用的结构型设计模式&#xff0c;它的主要目的是节省内存&#xff0c;尤其在需要创建大量相似对象时。 通俗解释&#xff1a; 想象我们在写一本书&#xff0c;每个字母都需要表示出来。如果每个字母都单独用对象表示&#xff…

23 go语言(golang) - gin框架安装及使用(四)

五、跨域资源共享 跨域资源共享&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;是一种机制&#xff0c;它允许来自不同源的请求访问资源。默认情况下&#xff0c;浏览器出于安全原因会阻止跨域 HTTP 请求。Gin 框架本身没有内置的 CORS 支持&#xff…

Python(第一天)

Python解释器的安装和Python编辑器的安装 一.版本建议 Python解释器&#xff1a;3.6-3.7 Python编辑器&#xff1a;2018-2019 professional专业版 二.Python解释器的安装 官网&#xff1a;www.python.org 或者使用作者提供的安装包&#xff0c;我会在评论区留下文件分享 …

JAVA:组合模式(Composite Pattern)的技术指南

1、简述 组合模式(Composite Pattern)是一种结构型设计模式,旨在将对象组合成树形结构以表示“部分-整体”的层次结构。它使客户端对单个对象和组合对象的使用具有一致性。 设计模式样例:https://gitee.com/lhdxhl/design-pattern-example.git 2、什么是组合模式 组合模式…