前端开发 之 12个鼠标交互殊效下【附完备源码】

飞不高  金牌会员 | 前天 09:35 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 774|帖子 774|积分 2322

前端开发 之 12个鼠标交互殊效下【附完备源码】


  
七：粒子烟花绽放殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>烟花绽放特效</title>
  7. <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.     box-sizing: border-box;
  12.   }
  13.   body, html {
  14.     height: 100%;
  15.     margin: 0;
  16.     display: flex;
  17.     justify-content: center;
  18.     align-items: center;
  19.     background-color: #161816;
  20.     overflow: hidden;
  21.   }
  23.   #explosion-container {
  24.     position: absolute;
  25.     top: 0;
  26.     left: 0;
  27.     width: 100vw;
  28.     height: 100vh;
  29.   }
  31.   .particle {
  32.     position: absolute;
  33.     width: 4px;
  34.     height: 4px;
  35.     background-color: #fff;
  36.     border-radius: 50%;
  37.     opacity: 1;
  38.     pointer-events: none;
  39.   }
  40. </style>
  41. </head>
  42. <body>
  44. <div id="explosion-container"></div>
  46. <script>
  47.   const container = document.getElementById('explosion-container');
  48.   const particleCount = 100;
  49.   const maxSpeed = 5;
  50.   const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  52.   function random(min, max) {
  53.     return Math.random() * (max - min) + min;
  54.   }
  56.   function getRandomColor() {
  57.     const randomIndex = Math.floor(Math.random() * colors.length);
  58.     return colors[randomIndex];
  59.   }
  61.   function createParticle(startX, startY) {
  62.     const particle = document.createElement('div');
  63.     particle.classList.add('particle');
  64.     const halfSize = random(2, 6) / 2;
  65.     particle.style.width = `${2 * halfSize}px`;
  66.     particle.style.height = `${2 * halfSize}px`;
  67.     particle.style.backgroundColor = getRandomColor();
  69.     const speedX = random(-maxSpeed, maxSpeed);
  70.     const speedY = random(-maxSpeed, maxSpeed);
  71.     let x = startX;
  72.     let y = startY;
  73.     let angle = random(0, 2 * Math.PI);
  75.     function update() {
  76.       x += speedX;
  77.       y += speedY;
  78.       angle += 0.1;
  79.       particle.style.transform = `translate3d(${x}px, ${y}px, 0) rotate(${angle}rad)`;
  81.       if (x < -50 || x > window.innerWidth + 50 || y < -50 || y > window.innerHeight + 50) {
  82.         particle.remove();
  83.       } else {
  84.         requestAnimationFrame(update);
  85.       }
  86.     }
  88.     update();
  89.     container.appendChild(particle);
  90.   }
  92.   function createExplosion(x, y) {
  93.     for (let i = 0; i < particleCount; i++) {
  94.       createParticle(x, y);
  95.     }
  96.   }
  98.   document.addEventListener('click', (event) => {
  99.     createExplosion(event.clientX, event.clientY);
  100.   });
  101. </script>
  103. </body>
  104. </html>
复制代码
八：彩球开释殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>彩球释放特效</title>
  7.     <style>
  8. body, html {
  9.     margin: 0;
  10.     padding: 0;
  11.     width: 100%;
  12.     height: 100%;
  13.     overflow: hidden;
  14. }
  16. #particleCanvas {
  17.     display: block;
  18.     width: 100%;
  19.     height: 100%;
  20.     background: #000;
  21. }
  22.     </style>
  23. </head>
  24. <body>
  25.     <canvas id="particleCanvas"></canvas>
  26. </body>
  27. <script>
  28. const canvas = document.getElementById('particleCanvas');
  29. const ctx = canvas.getContext('2d');
  31. canvas.width = window.innerWidth;
  32. canvas.height = window.innerHeight;
  34. const particlesArray = [];
  35. const numberOfParticles = 100;
  36. const mouse = {
  37.     x: undefined,
  38.     y: undefined,
  39. };
  41. class Particle {
  42.     constructor() {
  43.         this.x = canvas.width / 2;
  44.         this.y = canvas.height / 2;
  45.         this.size = Math.random() * 5 + 1;
  46.         this.speedX = Math.random() * 3 - 1.5;
  47.         this.speedY = Math.random() * 3 - 1.5;
  48.         this.color = 'hsl(' + Math.floor(Math.random() * 360) + ', 100%, 50%)';
  49.     }
  51.     update() {
  52.         this.x += this.speedX;
  53.         this.y += this.speedY;
  55.         if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
  56.         if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
  58.         this.draw();
  59.     }
  61.     draw() {
  62.         ctx.fillStyle = this.color;
  63.         ctx.beginPath();
  64.         ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  65.         ctx.closePath();
  66.         ctx.fill();
  67.     }
  68. }
  70. function init() {
  71.     for (let i = 0; i < numberOfParticles; i++) {
  72.         particlesArray.push(new Particle());
  73.     }
  74. }
  76. function animate() {
  77.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  79.     for (let particle of particlesArray) {
  80.         particle.update();
  81.     }
  83.     requestAnimationFrame(animate);
  84. }
  86. window.addEventListener('resize', function() {
  87.     canvas.width = window.innerWidth;
  88.     canvas.height = window.innerHeight;
  89. });
  91. window.addEventListener('mousemove', function(event) {
  92.     mouse.x = event.x;
  93.     mouse.y = event.y;
  94.     for (let particle of particlesArray) {
  95.         particle.x = mouse.x;
  96.         particle.y = mouse.y;
  97.     }
  98. });
  100. window.addEventListener('mouseout', function() {
  101.     mouse.x = undefined;
  102.     mouse.y = undefined;
  103. });
  105. init();
  106. animate();
  107. </script>
  108. </html>
复制代码
九：雨滴掉落殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>雨滴掉落特效</title>
  5.   <meta name="Generator" content="EditPlus">
  6.   <meta charset="UTF-8">
  7.   <style>
  8.     body, html {
  9.       width: 100%;
  10.       height: 100%;
  11.       margin: 0;
  12.       padding: 0;
  13.       overflow: hidden;
  14.     }
  16.     canvas {
  17.       position: absolute;
  18.       left: 0;
  19.       top: 0;
  20.       width: 100%;
  21.       height: 100%;
  22.     }
  23.   </style>
  24. </head>
  26. <body>
  27.   <canvas id="canvas-club"></canvas>
  28.   <div class="overlay"></div>
  30.   <script>
  31.     var c = document.getElementById("canvas-club");
  32.     var ctx = c.getContext("2d");
  33.     var w = c.width = window.innerWidth;
  34.     var h = c.height = window.innerHeight;
  35.     var clearColor = 'rgba(0, 0, 0, .1)';
  36.     var max = 30;
  37.     var drops = [];
  38.     var mouseX = 0;
  39.     var mouseY = 0;
  41.     function random(min, max) {
  42.       return Math.random() * (max - min) + min;
  43.     }
  45.     function O() {}
  46.     O.prototype = {
  47.       init: function(x, y) {
  48.         this.x = x;
  49.         this.y = y;
  50.         this.color = 'hsl(180, 100%, 50%)';
  51.         this.w = 2;
  52.         this.h = 1;
  53.         this.vy = random(4, 5);
  54.         this.vw = 3;
  55.         this.vh = 1;
  56.         this.size = 2;
  57.         this.hit = random(h * .8, h * .9);
  58.         this.a = 1;
  59.         this.va = 0.96;
  60.       },
  61.       draw: function() {
  62.         if (this.y > this.hit) {
  63.           ctx.beginPath();
  64.           ctx.moveTo(this.x, this.y - this.h / 2);
  66.           ctx.bezierCurveTo(
  67.             this.x + this.w / 2, this.y - this.h / 2,
  68.             this.x + this.w / 2, this.y + this.h / 2,
  69.             this.x, this.y + this.h / 2);
  71.           ctx.bezierCurveTo(
  72.             this.x - this.w / 2, this.y + this.h / 2,
  73.             this.x - this.w / 2, this.y - this.h / 2,
  74.             this.x, this.y - this.h / 2);
  76.           ctx.strokeStyle = 'hsla(180, 100%, 50%, ' + this.a + ')';
  77.           ctx.stroke();
  78.           ctx.closePath();
  80.         } else {
  81.           ctx.fillStyle = this.color;
  82.           ctx.fillRect(this.x, this.y, this.size, this.size * 5);
  83.         }
  84.         this.update();
  85.       },
  86.       update: function() {
  87.         if (this.y < this.hit) {
  88.           this.y += this.vy;
  89.         } else {
  90.           if (this.a > 0.03) {
  91.             this.w += this.vw;
  92.             this.h += this.vh;
  93.             if (this.w > 100) {
  94.               this.a *= this.va;
  95.               this.vw *= 0.98;
  96.               this.vh *= 0.98;
  97.             }
  98.           } else {
  99.             this.a = 0;
  100.           }
  101.         }
  102.       }
  103.     }
  105.     function resize() {
  106.       w = c.width = window.innerWidth;
  107.       h = c.height = window.innerHeight;
  108.     }
  110.     function anim() {
  111.       ctx.fillStyle = clearColor;
  112.       ctx.fillRect(0, 0, w, h);
  113.       for (var i = drops.length - 1; i >= 0; i--) {
  114.         drops[i].draw();
  115.         if (drops[i].a <= 0.03) {
  116.           drops.splice(i, 1);
  117.         }
  118.       }
  119.       requestAnimationFrame(anim);
  120.     }
  122.     function onMouseMove(e) {
  123.       mouseX = e.clientX;
  124.       mouseY = e.clientY;
  125.       createRainDrop(mouseX, mouseY);
  126.     }
  128.     function createRainDrop(x, y) {
  129.       for (var i = 0; i < drops.length; i++) {
  130.         if (drops[i].y === 0) {
  131.           drops[i].init(x, y);
  132.           return;
  133.         }
  134.       }
  135.       var o = new O();
  136.       o.init(x, y);
  137.       drops.push(o);
  138.       if (drops.length > max) {
  139.         drops.shift();
  140.       }
  141.     }
  143.     window.addEventListener("resize", resize);
  144.     window.addEventListener("mousemove", onMouseMove);
  146.     anim();
  147.   </script>
  148. </body>
  149. </html>
复制代码
十：一叶莲滑动殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>一叶莲滑动特效</title>
  5. <meta charset="UTF-8">
  6. <style>
  7.     html, body {
  8.         width: 100%;
  9.         height: 100%;
  10.         margin: 0;
  11.         padding: 0;
  12.         overflow: hidden;
  13.         cursor: none;
  14.     }
  16.     .container {
  17.         width: 100%;
  18.         height: 100%;
  19.         margin: 0;
  20.         padding: 0;
  21.         background-image: linear-gradient(to right, rgba(154, 89, 168, 0.67), rgba(255, 30, 0, 0.67), rgba(0, 255, 153, 0.67));
  22.     }
  24.     .cursor {
  25.         position: absolute;
  26.         width: 20px;
  27.         height: 20px;
  28.         background: rgba(255, 255, 255, 0.8);
  29.         border-radius: 50%;
  30.         pointer-events: none;
  31.         transform: translate(-50%, -50%);
  32.         transition: transform 0.1s, opacity 0.1s;
  33.     }
  34. </style>
  35. <script src="jquery-3.7.1.min.js"></script>
  36. </head>
  37. <body>
  38.     <div id="jsi-cherry-container" class="container"></div>
  39.     <div id="cursor" class="cursor"></div>
  40.     <script>
  41.         var RENDERER = {
  42.             cherries: [],
  43.             mouse: { x: 0, y: 0 },
  45.             init: function () {
  46.                 this.setParameters();
  47.                 this.bindEvents();
  48.                 this.animate();
  49.             },
  50.             setParameters: function () {
  51.                 this.$container = $('#jsi-cherry-container');
  52.                 this.width = this.$container.width();
  53.                 this.height = this.$container.height();
  54.                 this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');
  55.                 this.$cursor = $('#cursor');
  56.             },
  57.             bindEvents: function () {
  58.                 $(document).on('mousemove', (e) => {
  59.                     this.mouse.x = e.pageX;
  60.                     this.mouse.y = e.pageY;
  61.                 });
  63.                 $(document).on('mouseout', () => {
  64.                     this.mouse.x = -100;
  65.                     this.mouse.y = -100;
  66.                 });
  68.                 window.addEventListener('resize', () => {
  69.                     this.width = this.$container.width();
  70.                     this.height = this.$container.height();
  71.                     this.context.canvas.width = this.width;
  72.                     this.context.canvas.height = this.height;
  73.                 });
  74.             },
  75.             createCherry: function (x, y) {
  76.                 var cherry = new CHERRY_BLOSSOM(this, x, y);
  77.                 this.cherries.push(cherry);
  78.             },
  79.             animate: function () {
  80.                 requestAnimationFrame(this.animate.bind(this));
  81.                 this.context.clearRect(0, 0, this.width, this.height);
  83.                 this.cherries.forEach((cherry, index) => {
  84.                     cherry.update();
  85.                     cherry.render(this.context);
  87.                     if (cherry.opacity <= 0) {
  88.                         this.cherries.splice(index, 1);
  89.                     }
  90.                 });
  92.                 this.$cursor.css({
  93.                     left: this.mouse.x,
  94.                     top: this.mouse.y,
  95.                     opacity: this.cherries.length > 0 ? 0 : 1
  96.                 });
  97.             }
  98.         };
  100.         var CHERRY_BLOSSOM = function (renderer, x, y) {
  101.             this.renderer = renderer;
  102.             this.x = x;
  103.             this.y = y;
  104.             this.size = Math.random() * 10 + 10;
  105.             this.angle = Math.random() * Math.PI * 2;
  106.             this.speed = Math.random() * 0.5 + 0.5;
  107.             this.opacity = 1;
  108.             this.life = 100 + Math.random() * 100;
  109.         };
  111.         CHERRY_BLOSSOM.prototype = {
  112.             update: function () {
  113.                 this.x += Math.cos(this.angle) * this.speed;
  114.                 this.y += Math.sin(this.angle) * this.speed;
  115.                 this.opacity -= 0.02;
  116.                 this.size *= 0.98;
  117.                 this.life--;
  118.             },
  119.             render: function (context) {
  120.                 context.save();
  121.                 context.globalAlpha = this.opacity;
  122.                 context.fillStyle = 'hsl(330, 70%, 50%)';
  123.                 context.translate(this.x, this.y);
  124.                 context.scale(this.size / 20, this.size / 20);
  125.                 context.beginPath();
  126.                 context.moveTo(0, 40);
  127.                 context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
  128.                 context.bezierCurveTo(10, -60, 60, 20, 0, 40);
  129.                 context.fill();
  130.                 context.restore();
  131.             }
  132.         };
  134.         $(function () {
  135.             RENDERER.init();
  136.             setInterval(() => {
  137.                 RENDERER.createCherry(RENDERER.mouse.x, RENDERER.mouse.y);
  138.             }, 50);
  139.         });
  140.     </script>
  141. </body>
  142. </html>
复制代码
十一：彩球配景滑动交互殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>彩球背景滑动交互特效</title>
  5. <meta charset="UTF-8">
  6. <style>
  7.     html, body {
  8.         width: 100%;
  9.         height: 100%;
  10.         margin: 0;
  11.         padding: 0;
  12.         overflow: hidden;
  13.         cursor: none;
  14.     }
  15.     .container {
  16.         width: 100%;
  17.         height: 100%;
  18.         background-image: linear-gradient(to right, rgba(154, 89, 168, 0.67), rgba(255, 30, 0, 0.67), rgba(0, 255, 153, 0.67));
  19.     }
  20.     .cursor {
  21.         position: absolute;
  22.         width: 20px;
  23.         height: 20px;
  24.         border-radius: 50%;
  25.         background: rgba(255, 255, 255, 0.7);
  26.         box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  27.         pointer-events: none;
  28.         z-index: 1000;
  29.     }
  30. </style>
  31. <script type="text/javascript" src="jquery-3.7.1.min.js"></script>
  32. </head>
  33. <body>
  34. <div id="jsi-cherry-container" class="container"></div>
  35. <div id="cursor" class="cursor"></div>
  36. <script>
  37.     var RENDERER = {
  38.         INIT_CHERRY_BLOSSOM_COUNT: 50,
  39.         MAX_ADDING_INTERVAL: 10,
  40.         cherries: [],
  41.         mouse: { x: 0, y: 0 },
  43.         init: function () {
  44.             this.setParameters();
  45.             this.reconstructMethods();
  46.             this.createCherries();
  47.             this.bindEvents();
  48.             this.render();
  49.         },
  50.         setParameters: function () {
  51.             this.$container = $('#jsi-cherry-container');
  52.             this.width = this.$container.width();
  53.             this.height = this.$container.height();
  54.             this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');
  55.             this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);
  56.             this.addingInterval = this.maxAddingInterval;
  57.         },
  58.         reconstructMethods: function () {
  59.             this.render = this.render.bind(this);
  60.             this.onMouseMove = this.onMouseMove.bind(this);
  61.         },
  62.         bindEvents: function () {
  63.             $(window).on('mousemove', this.onMouseMove);
  64.         },
  65.         createCherries: function () {
  66.             for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++) {
  67.                 this.cherries.push(new CHERRY_BLOSSOM(this));
  68.             }
  69.         },
  70.         onMouseMove: function (e) {
  71.             this.mouse.x = e.pageX;
  72.             this.mouse.y = e.pageY;
  73.         },
  74.         render: function () {
  75.             requestAnimationFrame(this.render);
  76.             this.context.clearRect(0, 0, this.width, this.height);
  78.             $('#cursor').css({ left: this.mouse.x - 10 + 'px', top: this.mouse.y - 10 + 'px' });
  80.             this.cherries.sort(function (cherry1, cherry2) {
  81.                 return cherry1.z - cherry2.z;
  82.             });
  83.             for (var i = this.cherries.length - 1; i >= 0; i--) {
  84.                 if (!this.cherries[i].render(this.context, this.mouse)) {
  85.                     this.cherries.splice(i, 1);
  86.                 }
  87.             }
  88.             if (--this.addingInterval == 0) {
  89.                 this.addingInterval = this.maxAddingInterval;
  90.                 this.cherries.push(new CHERRY_BLOSSOM(this));
  91.             }
  92.         }
  93.     };
  95.     var CHERRY_BLOSSOM = function (renderer) {
  96.         this.renderer = renderer;
  97.         this.init();
  98.     };
  99.     CHERRY_BLOSSOM.prototype = {
  100.         FOCUS_POSITION: 300,
  101.         FAR_LIMIT: 600,
  102.         init: function () {
  103.             this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);
  104.             this.y = this.getRandomValue(0, this.renderer.height);
  105.             this.z = this.getRandomValue(0, this.FAR_LIMIT);
  106.             this.vx = this.getRandomValue(-1, 1);
  107.             this.vy = this.getRandomValue(-1, 1);
  108.             this.theta = this.getRandomValue(0, Math.PI * 2);
  109.             this.phi = this.getRandomValue(0, Math.PI * 2);
  110.             this.size = this.getRandomValue(2, 5);
  111.             this.color = 'hsl(' + Math.floor(Math.random() * 360) + ', 100%, 50%)';
  112.         },
  113.         getRandomValue: function (min, max) {
  114.             return min + (max - min) * Math.random();
  115.         },
  116.         getAxis: function (mouse) {
  117.             var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
  118.                 x = this.renderer.width / 2 + (this.x - mouse.x) * rate,
  119.                 y = this.renderer.height / 2 - (this.y - mouse.y) * rate;
  120.             return { rate: rate, x: x, y: y };
  121.         },
  122.         render: function (context, mouse) {
  123.             var axis = this.getAxis(mouse);
  125.             context.save();
  126.             context.fillStyle = this.color;
  127.             context.translate(axis.x, axis.y);
  128.             context.rotate(this.theta);
  129.             context.scale(axis.rate * this.size, axis.rate * this.size);
  130.             context.beginPath();
  131.             context.moveTo(0, 0);
  132.             context.arc(0, 0, 10, 0, Math.PI * 2, false);
  133.             context.fill();
  134.             context.restore();
  136.             this.x += this.vx;
  137.             this.y += this.vy;
  138.             this.theta += 0.01;
  140.             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;
  141.         }
  142.     };
  144.     $(function () {
  145.         RENDERER.init();
  146.     });
  147. </script>
  148. </body>
  149. </html>
复制代码
十二：雨滴散落交互殊效

1.效果展示


2.HTML完备代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>雨滴散落特效</title>
  5.   <meta name="Generator" content="EditPlus">
  6.   <meta charset="UTF-8">
  7.   <style>
  8.     body, html {
  9.       width: 100%;
  10.       height: 100%;
  11.       margin: 0;
  12.       padding: 0;
  13.       overflow: hidden;
  14.     }
  16.     canvas {
  17.       position: absolute;
  18.       left: 0;
  19.       top: 0;
  20.       width: 100%;
  21.       height: 100%;
  22.     }
  24.   </style>
  25. </head>
  27. <body>
  28.   <canvas id="canvas-club"></canvas>
  29.   <div class="overlay"></div>
  31.   <script>
  32.     var c = document.getElementById("canvas-club");
  33.     var ctx = c.getContext("2d");
  34.     var w = c.width = window.innerWidth;
  35.     var h = c.height = window.innerHeight;
  36.     var clearColor = 'rgba(0, 0, 0, .1)';
  37.     var max = 30;
  38.     var drops = [];
  39.     var mouseX = 0;
  40.     var mouseY = 0;
  42.     function random(min, max) {
  43.       return Math.random() * (max - min) + min;
  44.     }
  46.     function O() {}
  47.     O.prototype = {
  48.       init: function(x, y) {
  49.         this.x = x;
  50.         this.y = y;
  51.         this.color = 'hsl(180, 100%, 50%)';
  52.         this.w = 2;
  53.         this.h = 1;
  54.         this.vy = random(4, 5);
  55.         this.vw = 3;
  56.         this.vh = 1;
  57.         this.size = 2;
  58.         this.hit = random(h * .8, h * .9);
  59.         this.a = 1;
  60.         this.va = .96;
  61.       },
  62.       draw: function() {
  63.         if (this.y > this.hit) {
  64.           ctx.beginPath();
  65.           ctx.moveTo(this.x, this.y - this.h / 2);
  67.           ctx.bezierCurveTo(
  68.             this.x + this.w / 2, this.y - this.h / 2,
  69.             this.x + this.w / 2, this.y + this.h / 2,
  70.             this.x, this.y + this.h / 2);
  72.           ctx.bezierCurveTo(
  73.             this.x - this.w / 2, this.y + this.h / 2,
  74.             this.x - this.w / 2, this.y - this.h / 2,
  75.             this.x, this.y - this.h / 2);
  77.           ctx.strokeStyle = 'hsla(180, 100%, 50%, ' + this.a + ')';
  78.           ctx.stroke();
  79.           ctx.closePath();
  81.         } else {
  82.           ctx.fillStyle = this.color;
  83.           ctx.fillRect(this.x, this.y, this.size, this.size * 5);
  84.         }
  85.         this.update();
  86.       },
  87.       update: function() {
  88.         if (this.y < this.hit) {
  89.           this.y += this.vy;
  90.         } else {
  91.           if (this.a > .03) {
  92.             this.w += this.vw;
  93.             this.h += this.vh;
  94.             if (this.w > 100) {
  95.               this.a *= this.va;
  96.               this.vw *= .98;
  97.               this.vh *= .98;
  98.             }
  99.           } else {
  100.             this.init(random(0, w), 0);
  101.           }
  102.         }
  103.       }
  104.     }
  106.     function resize() {
  107.       w = c.width = window.innerWidth;
  108.       h = c.height = window.innerHeight;
  109.     }
  111.     function anim() {
  112.       ctx.fillStyle = clearColor;
  113.       ctx.fillRect(0, 0, w, h);
  114.       for (var i in drops) {
  115.         drops[i].draw();
  116.       }
  117.       requestAnimationFrame(anim);
  118.     }
  120.     function onMouseMove(e) {
  121.       mouseX = e.clientX;
  122.       mouseY = e.clientY;
  123.       createRainDrop(mouseX, mouseY);
  124.     }
  126.     function createRainDrop(x, y) {
  127.       for (var i = 0; i < drops.length; i++) {
  128.         if (drops[i].y === 0) {
  129.           drops[i].init(x, y);
  130.           return;
  131.         }
  132.       }
  133.       var o = new O();
  134.       o.init(x, y);
  135.       drops.push(o);
  136.       if (drops.length > max) {
  137.         drops.shift();
  138.       }
  139.     }
  141.     window.addEventListener("resize", resize);
  142.     window.addEventListener("mousemove", onMouseMove);
  143.     anim();
  144.   </script>
  145. </body>
  146. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

飞不高

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表