文章目录 前端开发 之 12个鼠标交互特效上【附完整源码】 一：彩色空心爱心滑动特效 二：彩色实心爱心滑动特效 三：粒子连结特效 四：彩色拖尾特效 五：彩色粒子收回特效 六：彩色粒子交互特效
HTML完整代码<! doctype html > < html> < head> < metacharset = " utf-8" > < title> </ title> < style> body { overflow : hidden; margin : 0; background : #222; } canvas { display : block; } </ style> </ head> < body> < canvas> </ canvas> < script> 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>
HTML完整代码<! doctype html > < html> < head> < metacharset = " utf-8" > < title> </ title> < style> 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> 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>
HTML完整代码<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> 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> < canvasid = " particleCanvas" > </ canvas> </ body> < script>
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>
HTML完整代码<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> 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> < divid = " trail-container" > </ div> < script> 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>
HTML完整代码<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> 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> < canvasid = " particleCanvas" > </ canvas> < script> 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完整代码<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> </ head> < body> < script> ! ( 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> 
