文章目录 前端开发 之 12个鼠标交互特效下【附完整源码】 七：粒子烟花绽放特效 八：彩球释放特效 九：雨滴掉落特效 十：一叶莲滑动特效 十一：彩球背景滑动交互特效 十二：雨滴散落交互特效
HTML完整代码<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> * { margin : 0; padding : 0; box-sizing : border-box; } body, html { height : 100%; margin : 0; display : flex; justify-content : center; align-items : center; background-color : #161816; overflow : hidden; } #explosion-container { position : absolute; top : 0; left : 0; width : 100vw; height : 100vh; } .particle { position : absolute; width : 4px; height : 4px; background-color : #fff; border-radius : 50%; opacity : 1; pointer-events : none; }
</ style> </ head> < body> < divid = " explosion-container" > </ div> < script> const container = document. getElementById ( 'explosion-container' ) ; const particleCount = 100 ; const maxSpeed = 5 ; const colors = [ '#ff0000' , '#00ff00' , '#0000ff' , '#ffff00' , '#ff00ff' , '#00ffff' ] ; function random ( min, max ) { return Math. random ( ) * ( max - min) + min; } function getRandomColor ( ) { const randomIndex = Math. floor ( Math. random ( ) * colors. length) ; return colors[ randomIndex] ; } function createParticle ( startX, startY ) { const particle = document. createElement ( 'div' ) ; particle. classList. add ( 'particle' ) ; const halfSize = random ( 2 , 6 ) / 2 ; particle. style. width = ` ${ 2 * halfSize} px ` ; particle. style. height = ` ${ 2 * halfSize} px ` ; particle. style. backgroundColor = getRandomColor ( ) ; const speedX = random ( - maxSpeed, maxSpeed) ; const speedY = random ( - maxSpeed, maxSpeed) ; let x = startX; let y = startY; let angle = random ( 0 , 2 * Math. PI ) ; function update ( ) { x += speedX; y += speedY; angle += 0.1 ; particle. style. transform = ` translate3d( ${ x} px, ${ y} px, 0) rotate( ${ angle} rad) ` ; if ( x < - 50 || x > window. innerWidth + 50 || y < - 50 || y > window. innerHeight + 50 ) { particle. remove ( ) ; } else { requestAnimationFrame ( update) ; } } update ( ) ; container. appendChild ( particle) ; } function createExplosion ( x, y ) { for ( let i = 0 ; i < particleCount; i++ ) { createParticle ( x, y) ; } } document. addEventListener ( 'click' , ( event ) => { createExplosion ( event. clientX, event. clientY) ; } ) ;
</ 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 : #000;
} </ 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; const particlesArray = [ ] ;
const numberOfParticles = 100 ;
const mouse = { x : undefined , y : undefined ,
} ; class Particle { constructor ( ) { this . x = canvas. width / 2 ; this . y = canvas. height / 2 ; this . size = Math. random ( ) * 5 + 1 ; this . speedX = Math. random ( ) * 3 - 1.5 ; this . speedY = Math. random ( ) * 3 - 1.5 ; this . color = 'hsl(' + Math. floor ( Math. random ( ) * 360 ) + ', 100%, 50%)' ; } 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 ; this . draw ( ) ; } draw ( ) { 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; for ( let particle of particlesArray) { particle. x = mouse. x; particle. y = mouse. y; }
} ) ; window. addEventListener ( 'mouseout' , function ( ) { mouse. x = undefined ; mouse. y = undefined ;
} ) ; init ( ) ;
animate ( ) ;
</ script> </ html>
HTML完整代码<! DOCTYPE html > < html> < head> < title> </ title> < metaname = " Generator" content = " EditPlus" > < metacharset = " UTF-8" > < style> body, html { width : 100%; height : 100%; margin : 0; padding : 0; overflow : hidden; } canvas { position : absolute; left : 0; top : 0; width : 100%; height : 100%; } </ style> </ head> < body> < canvasid = " canvas-club" > </ canvas> < divclass = " overlay" > </ div> < script> var c = document. getElementById ( "canvas-club" ) ; var ctx = c. getContext ( "2d" ) ; var w = c. width = window. innerWidth; var h = c. height = window. innerHeight; var clearColor = 'rgba(0, 0, 0, .1)' ; var max = 30 ; var drops = [ ] ; var mouseX = 0 ; var mouseY = 0 ; function random ( min, max ) { return Math. random ( ) * ( max - min) + min; } function O ( ) { } O . prototype = { init : function ( x, y ) { this . x = x; this . y = y; this . color = 'hsl(180, 100%, 50%)' ; this . w = 2 ; this . h = 1 ; this . vy = random ( 4 , 5 ) ; this . vw = 3 ; this . vh = 1 ; this . size = 2 ; this . hit = random ( h * .8 , h * .9 ) ; this . a = 1 ; this . va = 0.96 ; } , draw : function ( ) { if ( this . y > this . hit) { ctx. beginPath ( ) ; ctx. moveTo ( this . x, this . y - this . h / 2 ) ; ctx. bezierCurveTo ( this . x + this . w / 2 , this . y - this . h / 2 , this . x + this . w / 2 , this . y + this . h / 2 , this . x, this . y + this . h / 2 ) ; ctx. bezierCurveTo ( this . x - this . w / 2 , this . y + this . h / 2 , this . x - this . w / 2 , this . y - this . h / 2 , this . x, this . y - this . h / 2 ) ; ctx. strokeStyle = 'hsla(180, 100%, 50%, ' + this . a + ')' ; ctx. stroke ( ) ; ctx. closePath ( ) ; } else { ctx. fillStyle = this . color; ctx. fillRect ( this . x, this . y, this . size, this . size * 5 ) ; } this . update ( ) ; } , update : function ( ) { if ( this . y < this . hit) { this . y += this . vy; } else { if ( this . a > 0.03 ) { this . w += this . vw; this . h += this . vh; if ( this . w > 100 ) { this . a *= this . va; this . vw *= 0.98 ; this . vh *= 0.98 ; } } else { this . a = 0 ; } } } } function resize ( ) { w = c. width = window. innerWidth; h = c. height = window. innerHeight; } function anim ( ) { ctx. fillStyle = clearColor; ctx. fillRect ( 0 , 0 , w, h) ; for ( var i = drops. length - 1 ; i >= 0 ; i-- ) { drops[ i] . draw ( ) ; if ( drops[ i] . a <= 0.03 ) { drops. splice ( i, 1 ) ; } } requestAnimationFrame ( anim) ; } function onMouseMove ( e ) { mouseX = e. clientX; mouseY = e. clientY; createRainDrop ( mouseX, mouseY) ; } function createRainDrop ( x, y ) { for ( var i = 0 ; i < drops. length; i++ ) { if ( drops[ i] . y === 0 ) { drops[ i] . init ( x, y) ; return ; } } var o = new O ( ) ; o. init ( x, y) ; drops. push ( o) ; if ( drops. length > max) { drops. shift ( ) ; } } window. addEventListener ( "resize" , resize) ; window. addEventListener ( "mousemove" , onMouseMove) ; anim ( ) ; </ script> </ body> </ html>
HTML完整代码<! DOCTYPE HTML > < html> < head> < title> </ title> < metacharset = " UTF-8" > < style> html, body { width : 100%; height : 100%; margin : 0; padding : 0; overflow : hidden; cursor : none; } .container { width : 100%; height : 100%; margin : 0; padding : 0; background-image : linear-gradient ( to right, rgba ( 154, 89, 168, 0.67) , rgba ( 255, 30, 0, 0.67) , rgba ( 0, 255, 153, 0.67) ) ; } .cursor { position : absolute; width : 20px; height : 20px; background : rgba ( 255, 255, 255, 0.8) ; border-radius : 50%; pointer-events : none; transform : translate ( -50%, -50%) ; transition : transform 0.1s, opacity 0.1s; }
</ style> < scriptsrc = " jquery-3.7.1.min.js" > </ script> </ head> < body> < divid = " jsi-cherry-container" class = " container" > </ div> < divid = " cursor" class = " cursor" > </ div> < script> var RENDERER = { cherries : [ ] , mouse : { x : 0 , y : 0 } , init : function ( ) { this . setParameters ( ) ; this . bindEvents ( ) ; this . animate ( ) ; } , setParameters : function ( ) { this . $container = $ ( '#jsi-cherry-container' ) ; this . width = this . $container. width ( ) ; this . height = this . $container. height ( ) ; this . context = $ ( '<canvas />' ) . attr ( { width : this . width, height : this . height } ) . appendTo ( this . $container) . get ( 0 ) . getContext ( '2d' ) ; this . $cursor = $ ( '#cursor' ) ; } , bindEvents : function ( ) { $ ( document) . on ( 'mousemove' , ( e ) => { this . mouse. x = e. pageX; this . mouse. y = e. pageY; } ) ; $ ( document) . on ( 'mouseout' , ( ) => { this . mouse. x = - 100 ; this . mouse. y = - 100 ; } ) ; window. addEventListener ( 'resize' , ( ) => { this . width = this . $container. width ( ) ; this . height = this . $container. height ( ) ; this . context. canvas. width = this . width; this . context. canvas. height = this . height; } ) ; } , createCherry : function ( x, y ) { var cherry = new CHERRY_BLOSSOM ( this , x, y) ; this . cherries. push ( cherry) ; } , animate : function ( ) { requestAnimationFrame ( this . animate . bind ( this ) ) ; this . context. clearRect ( 0 , 0 , this . width, this . height) ; this . cherries. forEach ( ( cherry, index ) => { cherry. update ( ) ; cherry. render ( this . context) ; if ( cherry. opacity <= 0 ) { this . cherries. splice ( index, 1 ) ; } } ) ; this . $cursor. css ( { left : this . mouse. x, top : this . mouse. y, opacity : this . cherries. length > 0 ? 0 : 1 } ) ; } } ; var CHERRY_BLOSSOM = function ( renderer, x, y ) { this . renderer = renderer; this . x = x; this . y = y; this . size = Math. random ( ) * 10 + 10 ; this . angle = Math. random ( ) * Math. PI * 2 ; this . speed = Math. random ( ) * 0.5 + 0.5 ; this . opacity = 1 ; this . life = 100 + Math. random ( ) * 100 ; } ; CHERRY_BLOSSOM . prototype = { update : function ( ) { this . x += Math. cos ( this . angle) * this . speed; this . y += Math. sin ( this . angle) * this . speed; this . opacity -= 0.02 ; this . size *= 0.98 ; this . life-- ; } , render : function ( context ) { context. save ( ) ; context. globalAlpha = this . opacity; context. fillStyle = 'hsl(330, 70%, 50%)' ; context. translate ( this . x, this . y) ; context. scale ( this . size / 20 , this . size / 20 ) ; context. beginPath ( ) ; context. moveTo ( 0 , 40 ) ; context. bezierCurveTo ( - 60 , 20 , - 10 , - 60 , 0 , - 20 ) ; context. bezierCurveTo ( 10 , - 60 , 60 , 20 , 0 , 40 ) ; context. fill ( ) ; context. restore ( ) ; } } ; $ ( function ( ) { RENDERER . init ( ) ; setInterval ( ( ) => { RENDERER . createCherry ( RENDERER . mouse. x, RENDERER . mouse. y) ; } , 50 ) ; } ) ; </ script> </ body> </ html>
HTML完整代码<! DOCTYPE HTML > < html> < head> < title> </ title> < metacharset = " UTF-8" > < style> html, body { width : 100%; height : 100%; margin : 0; padding : 0; overflow : hidden; cursor : none; } .container { width : 100%; height : 100%; background-image : linear-gradient ( to right, rgba ( 154, 89, 168, 0.67) , rgba ( 255, 30, 0, 0.67) , rgba ( 0, 255, 153, 0.67) ) ; } .cursor { position : absolute; width : 20px; height : 20px; border-radius : 50%; background : rgba ( 255, 255, 255, 0.7) ; box-shadow : 0 0 10px rgba ( 255, 255, 255, 0.9) ; pointer-events : none; z-index : 1000; }
</ style> < scripttype = " text/javascript" src = " jquery-3.7.1.min.js" > </ script> </ head> < body> < divid = " jsi-cherry-container" class = " container" > </ div> < divid = " cursor" class = " cursor" > </ div> < script> var RENDERER = { INIT_CHERRY_BLOSSOM_COUNT : 50 , MAX_ADDING_INTERVAL : 10 , cherries : [ ] , mouse : { x : 0 , y : 0 } , init : function ( ) { this . setParameters ( ) ; this . reconstructMethods ( ) ; this . createCherries ( ) ; this . bindEvents ( ) ; this . render ( ) ; } , setParameters : function ( ) { this . $container = $ ( '#jsi-cherry-container' ) ; this . width = this . $container. width ( ) ; this . height = this . $container. height ( ) ; this . context = $ ( '<canvas />' ) . attr ( { width : this . width, height : this . height } ) . appendTo ( this . $container) . get ( 0 ) . getContext ( '2d' ) ; this . maxAddingInterval = Math. round ( this . MAX_ADDING_INTERVAL * 1000 / this . width) ; this . addingInterval = this . maxAddingInterval; } , reconstructMethods : function ( ) { this . render = this . render . bind ( this ) ; this . onMouseMove = this . onMouseMove . bind ( this ) ; } , bindEvents : function ( ) { $ ( window) . on ( 'mousemove' , this . onMouseMove) ; } , createCherries : function ( ) { for ( var i = 0 , length = Math. round ( this . INIT_CHERRY_BLOSSOM_COUNT * this . width / 1000 ) ; i < length; i++ ) { this . cherries. push ( new CHERRY_BLOSSOM ( this ) ) ; } } , onMouseMove : function ( e ) { this . mouse. x = e. pageX; this . mouse. y = e. pageY; } , render : function ( ) { requestAnimationFrame ( this . render) ; this . context. clearRect ( 0 , 0 , this . width, this . height) ; $ ( '#cursor' ) . css ( { left : this . mouse. x - 10 + 'px' , top : this . mouse. y - 10 + 'px' } ) ; this . cherries. sort ( function ( cherry1, cherry2 ) { return cherry1. z - cherry2. z; } ) ; for ( var i = this . cherries. length - 1 ; i >= 0 ; i-- ) { if ( ! this . cherries[ i] . render ( this . context, this . mouse) ) { this . cherries. splice ( i, 1 ) ; } } if ( -- this . addingInterval == 0 ) { this . addingInterval = this . maxAddingInterval; this . cherries. push ( new CHERRY_BLOSSOM ( this ) ) ; } } } ; var CHERRY_BLOSSOM = function ( renderer ) { this . renderer = renderer; this . init ( ) ; } ; CHERRY_BLOSSOM . prototype = { FOCUS_POSITION : 300 , FAR_LIMIT : 600 , init : function ( ) { this . x = this . getRandomValue ( - this . renderer. width, this . renderer. width) ; this . y = this . getRandomValue ( 0 , this . renderer. height) ; this . z = this . getRandomValue ( 0 , this . FAR_LIMIT ) ; this . vx = this . getRandomValue ( - 1 , 1 ) ; this . vy = this . getRandomValue ( - 1 , 1 ) ; this . theta = this . getRandomValue ( 0 , Math. PI * 2 ) ; this . phi = this . getRandomValue ( 0 , Math. PI * 2 ) ; this . size = this . getRandomValue ( 2 , 5 ) ; this . color = 'hsl(' + Math. floor ( Math. random ( ) * 360 ) + ', 100%, 50%)' ; } , getRandomValue : function ( min, max ) { return min + ( max - min) * Math. random ( ) ; } , getAxis : function ( mouse ) { var rate = this . FOCUS_POSITION / ( this . z + this . FOCUS_POSITION ) , x = this . renderer. width / 2 + ( this . x - mouse. x) * rate, y = this . renderer. height / 2 - ( this . y - mouse. y) * rate; return { rate : rate, x : x, y : y } ; } , render : function ( context, mouse ) { var axis = this . getAxis ( mouse) ; context. save ( ) ; context. fillStyle = this . color; context. translate ( axis. x, axis. y) ; context. rotate ( this . theta) ; context. scale ( axis. rate * this . size, axis. rate * this . size) ; context. beginPath ( ) ; context. moveTo ( 0 , 0 ) ; context. arc ( 0 , 0 , 10 , 0 , Math. PI * 2 , false ) ; context. fill ( ) ; context. restore ( ) ; this . x += this . vx; this . y += this . vy; this . theta += 0.01 ; return this . z > - this . FOCUS_POSITION && this . z < this . FAR_LIMIT && this . x < this . renderer. width * 1.5 && this . x > - this . renderer. width * 0.5 ; } } ; $ ( function ( ) { RENDERER . init ( ) ; } ) ;
</ script> </ body> </ html>
HTML完整代码<! DOCTYPE html > < html> < head> < title> </ title> < metaname = " Generator" content = " EditPlus" > < metacharset = " UTF-8" > < style> body, html { width : 100%; height : 100%; margin : 0; padding : 0; overflow : hidden; } canvas { position : absolute; left : 0; top : 0; width : 100%; height : 100%; } </ style> </ head> < body> < canvasid = " canvas-club" > </ canvas> < divclass = " overlay" > </ div> < script> var c = document. getElementById ( "canvas-club" ) ; var ctx = c. getContext ( "2d" ) ; var w = c. width = window. innerWidth; var h = c. height = window. innerHeight; var clearColor = 'rgba(0, 0, 0, .1)' ; var max = 30 ; var drops = [ ] ; var mouseX = 0 ; var mouseY = 0 ; function random ( min, max ) { return Math. random ( ) * ( max - min) + min; } function O ( ) { } O . prototype = { init : function ( x, y ) { this . x = x; this . y = y; this . color = 'hsl(180, 100%, 50%)' ; this . w = 2 ; this . h = 1 ; this . vy = random ( 4 , 5 ) ; this . vw = 3 ; this . vh = 1 ; this . size = 2 ; this . hit = random ( h * .8 , h * .9 ) ; this . a = 1 ; this . va = .96 ; } , draw : function ( ) { if ( this . y > this . hit) { ctx. beginPath ( ) ; ctx. moveTo ( this . x, this . y - this . h / 2 ) ; ctx. bezierCurveTo ( this . x + this . w / 2 , this . y - this . h / 2 , this . x + this . w / 2 , this . y + this . h / 2 , this . x, this . y + this . h / 2 ) ; ctx. bezierCurveTo ( this . x - this . w / 2 , this . y + this . h / 2 , this . x - this . w / 2 , this . y - this . h / 2 , this . x, this . y - this . h / 2 ) ; ctx. strokeStyle = 'hsla(180, 100%, 50%, ' + this . a + ')' ; ctx. stroke ( ) ; ctx. closePath ( ) ; } else { ctx. fillStyle = this . color; ctx. fillRect ( this . x, this . y, this . size, this . size * 5 ) ; } this . update ( ) ; } , update : function ( ) { if ( this . y < this . hit) { this . y += this . vy; } else { if ( this . a > .03 ) { this . w += this . vw; this . h += this . vh; if ( this . w > 100 ) { this . a *= this . va; this . vw *= .98 ; this . vh *= .98 ; } } else { this . init ( random ( 0 , w) , 0 ) ; } } } } function resize ( ) { w = c. width = window. innerWidth; h = c. height = window. innerHeight; } function anim ( ) { ctx. fillStyle = clearColor; ctx. fillRect ( 0 , 0 , w, h) ; for ( var i in drops) { drops[ i] . draw ( ) ; } requestAnimationFrame ( anim) ; } function onMouseMove ( e ) { mouseX = e. clientX; mouseY = e. clientY; createRainDrop ( mouseX, mouseY) ; } function createRainDrop ( x, y ) { for ( var i = 0 ; i < drops. length; i++ ) { if ( drops[ i] . y === 0 ) { drops[ i] . init ( x, y) ; return ; } } var o = new O ( ) ; o. init ( x, y) ; drops. push ( o) ; if ( drops. length > max) { drops. shift ( ) ; } } window. addEventListener ( "resize" , resize) ; window. addEventListener ( "mousemove" , onMouseMove) ; anim ( ) ; </ script> </ body> </ html> 
![[创业之路-199]：《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论](http://pic.xiahunao.cn/[创业之路-199]：《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论)
