html--粒子炫酷

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量350 收藏 7
点赞数 9
分类专栏： html 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/137830713
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
  background: #fff345;
  overflow: hidden;
}

canvas {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

  </style>
 </HEAD>

 <BODY>
 <canvas></canvas>
  <script type="text/javascript" src="https://codepen.io/jackrugile/pen/f7248f1855b6b3ac41fc1799b440fdce"></script>
  <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/fast.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/mathjs@4.0.1/dist/math.min.js"></script>
  <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/CCapture.all.min.js"></script>
  <script>
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Calc = function () {
  function Calc() {
    _classCallCheck(this, Calc);
  }

  _createClass(Calc, null, [{
    key: 'rand',
    value: function rand(min, max, ease) {
      if (max === undefined) {
        max = min;
        min = 0;
      }
      var random = Math.random();
      if (ease) {
        random = ease(Math.random(), 0, 1, 1);
      }
      return random * (max - min) + min;
    }


  }, {
    key: 'randInt',
    value: function randInt(min, max, ease) {
      if (max === undefined) {
        max = min;
        min = 0;
      }
      var random = Math.random();
      if (ease) {
        random = ease(Math.random(), 0, 1, 1);
      }
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }


  }, {
    key: 'randArr',
    value: function randArr(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }


  }, {
    key: 'map',
    value: function map(val, inputMin, inputMax, outputMin, outputMax) {
      return (outputMax - outputMin) * ((val - inputMin) / (inputMax - inputMin)) + outputMin;
    }


  }, {
    key: 'clamp',
    value: function clamp(val, min, max) {
      return Math.max(Math.min(val, max), min);
    }

  }, {
    key: 'roundToUpperInterval',
    value: function roundToUpperInterval(value, interval) {
      if (value % interval === 0) {
        value += 0.0001;
      }
      return Math.ceil(value / interval) * interval;
    }



  }, {
    key: 'roundToLowerInterval',
    value: function roundToLowerInterval(value, interval) {
      if (value % interval === 0) {
        value -= 0.0001;
      }
      return Math.floor(value / interval) * interval;
    }


  }, {
    key: 'roundToNearestInterval',
    value: function roundToNearestInterval(value, interval) {
      return Math.round(value / interval) * interval;
    }


  }, {
    key: 'intersectSphere',
    value: function intersectSphere(a, b) {
      var distance = Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y) + (a.z - b.z) * (a.z - b.z));
      return distance < a.radius + b.radius;
    }


  }, {
    key: 'getIndexFromCoords',
    value: function getIndexFromCoords(x, y, w) {
      return x + y * w;
    }

  }, {
    key: 'getCoordsFromIndex',
    value: function getCoordsFromIndex(i, w) {
      return {
        x: i % w,
        y: Math.floor(i / w)
      };
    }
  }]);

  return Calc;
}();

;
console.clear();

var SpatialHash = function () {
  function SpatialHash(cellSize) {
    _classCallCheck(this, SpatialHash);

    this.cellSize = cellSize;
    this.reset();
  }

  _createClass(SpatialHash, [{
    key: 'reset',
    value: function reset() {
      this.cells = {};
    }
  }, {
    key: 'key',
    value: function key(point) {
      var x = math.floor(point.x / this.cellSize);
      var y = math.floor(point.y / this.cellSize);
      return x + '-' + y;
    }
  }, {
    key: 'insert',
    value: function insert(point) {
      var key = this.key(point);
      var cell = this.cells[key];
      if (!cell) {
        cell = this.cells[key] = {};
        cell.x = math.floor(point.x / this.cellSize);
        cell.y = math.floor(point.y / this.cellSize);
        cell.alpha = 0;
        cell.alphaTarget = 0;
        cell.items = [];
      }
      cell.items.push(point);
    }
  }, {
    key: 'remove',
    value: function remove(point, last) {
      var cell = null;
      var key = null;
      if (last) {
        cell = this.cells[last];
      } else {
        key = this.key(point);
        cell = this.cells[key];
      }
      if (cell) {
        var index = fast.indexOf(cell.items, point);
        if (index !== -1) {
          cell.items.splice(index, 1);
        }
      }
    }
  }]);

  return SpatialHash;
}();

var Point = function () {
  function Point(demo, ctx) {
    _classCallCheck(this, Point);

    this.guid = demo.guid++;
    this.demo = demo;
    this.ctx = demo.ctx;
    this.x = Calc.rand(0, this.demo.width);
    this.y = Calc.rand(0, this.demo.height);
    this.vx = Calc.rand(-1, 1);
    this.vy = Calc.rand(-1, 1);
    this.radius = 1;
    this.demo.sh.insert(this);
    this.hash = this.demo.sh.key(this);
    this.lastHash = this.hash;
    this.thresh = math.pow(this.demo.sh.cellSize, 2);
    this.compareList = [];
    this.scale = 1;
    this.scaleTarget = 1;
  }

  _createClass(Point, [{
    key: 'compareOther',
    value: function compareOther(other) {
      if (fast.indexOf(this.compareList, other.guid) > -1 || fast.indexOf(other.compareList, this.guid) > -1) {
        return false;
      }
      var dx = other.x - this.x;
      var dy = other.y - this.y;
      var dist = dx * dx + dy * dy;
      if (dist < this.thresh) {
        var angle = math.atan2(dy, dx);
        var cos = math.cos(angle);
        var sin = math.sin(angle);
        var mag = (this.thresh - dist) * 0.0001;
        this.vx -= cos * mag;
        this.vy -= sin * mag;
        other.vx += cos * mag;
        other.vy += sin * mag;
      }
      this.compareList.push(other.guid);
      other.compareList.push(this.guid);
    }
  }, {
    key: 'compareMouse',
    value: function compareMouse() {
      var dx = this.demo.mouse.x - this.x;
      var dy = this.demo.mouse.y - this.y;
      var dist = dx * dx + dy * dy;
      var thresh = this.thresh * 3;
      this.scaleTarget = 1;
      if (dist < thresh) {
        var angle = math.atan2(dy, dx);
        var mag = (thresh - dist) * 0.0003;
        this.vx -= math.cos(angle) * mag;
        this.vy -= math.sin(angle) * mag;
        this.scaleTarget = 1 + (thresh - dist) * 0.009;
      }
    }
  }, {
    key: 'preupdate',
    value: function preupdate() {
      this.inRange = false;
      this.compareList.length = 0;
    }
  }, {
    key: 'update',
    value: function update(iMax) {
      this.hash = this.demo.sh.key(this);
      if (this.hash != this.lastHash) {
        this.demo.sh.remove(this, this.lastHash);
        this.demo.sh.insert(this);
      }

      this.vx += (this.demo.mouse.x - this.demo.width / 2) * 0.0009;
      this.vy += (this.demo.mouse.y - this.demo.height / 2) * 0.0009;

      this.compareMouse();

      if (this.vx > 0.5) {
        this.vx *= 0.95;
      }
      if (this.vx < -0.5) {
        this.vx *= 0.95;
      }
      if (this.vy > 0.5) {
        this.vy *= 0.95;
      }
      if (this.vy < -0.5) {
        this.vy *= 0.95;
      }

      this.x += this.vx * this.demo.dt;
      this.y += this.vy * this.demo.dt;

      if (this.x >= this.demo.width - this.radius) {
        this.x = this.demo.width - this.radius;
        this.vx -= 1;
      }
      if (this.x <= this.radius) {
        this.x = this.radius;
        this.vx += 1;
      }
      if (this.y >= this.demo.height - this.radius) {
        this.y = this.demo.height - this.radius;
        this.vy -= 1;
      }
      if (this.y <= this.radius) {
        this.y = this.radius;
        this.vy += 1;
      }

      this.lastHash = this.hash;

      this.scale += (this.scaleTarget - this.scale) * 0.1;
    }
  }, {
    key: 'render',
    value: function render() {
      this.demo.ctx.fillStyle = 'hsla(' + (this.demo.hue + this.y * 0.15 + this.x * 0.15) + ', 80%, 50%, 1)';
      this.demo.ctx.beginPath();
      this.demo.ctx.arc(this.x, this.y, this.radius * this.scale, 0, Math.PI * 2);
      this.demo.ctx.fill();
    }
  }]);

  return Point;
}();

var Demo = function () {
  function Demo() {
    var _this = this;

    _classCallCheck(this, Demo);

    this.guid = 0;
    this.currTime = Date.now();
    this.lastTime = this.currTime;
    this.dt = 1;
    this.setupCanvas();
    this.setupHash();

    this.points = [];
    this.combined = [];
    this.mouse = {
      x: 0,
      y: 0
    };
    this.hue = 160;

    this.capturer = new CCapture({
      verbose: true,
      framerate: 60,
      //motionBlurFrames: 12,
      quality: 100,
      format: 'webm',
      workersPath: 'js/'
    });
    this.capturing = false;

    this.reset();
    this.loop();

    window.addEventListener('resize', function () {
      return _this.onResize();
    });
    window.addEventListener('mousemove', function (e) {
      return _this.onMousemove(e);
    });
    window.addEventListener('keydown', function (e) {
      return _this.onKeydown(e);
    });
  }

  _createClass(Demo, [{
    key: 'setupCanvas',
    value: function setupCanvas() {
      this.canvas = document.querySelector('canvas');
      this.ctx = this.canvas.getContext('2d');
    }
  }, {
    key: 'setupHash',
    value: function setupHash() {
      this.sh = new SpatialHash(30);
    }
  }, {
    key: 'reset',
    value: function reset() {
      this.points = [];
      this.sh.reset();
      this.onResize();

      for (var i = 0; i < 300; i++) {
        var point = new Point(this);
        this.points.push(point);
      }
    }
  }, {
    key: 'onResize',
    value: function onResize() {
      this.width = 300;
      this.height = 300;
      this.dpr = window.devicePixelRatio;

      this.canvas.width = this.width * this.dpr;
      this.canvas.height = this.height * this.dpr;
      this.canvas.style.width = this.width + 'px';
      this.canvas.style.height = this.height + 'px';
      this.ctx.scale(this.dpr, this.dpr);

      this.bcr = this.canvas.getBoundingClientRect();
      this.mouse.x = this.width / 2;
      this.mouse.y = this.height / 2;
    }
  }, {
    key: 'onMousemove',
    value: function onMousemove(e) {
      this.mouse.x = Calc.clamp(e.pageX - this.bcr.left, 0, this.width - 1);
      this.mouse.y = Calc.clamp(e.pageY - this.bcr.top, 0, this.height - 1);
    }
  }, {
    key: 'onKeydown',
    value: function onKeydown(e) {
      if (e.which === 82) {
        //this.toggleCapture(); 
      }
    }
  }, {
    key: 'toggleCapture',
    value: function toggleCapture() {
      if (this.capturing) {
        this.capturer.stop();
        this.capturer.save();
        this.capturing = false;
      } else {
        this.capturer.start();
        this.capturing = true;
      }
    }
  }, {
    key: 'preupdate',
    value: function preupdate() {
      var i = this.points.length;
      while (i--) {
        var point = this.points[i];
        point.preupdate(i);
      }
    }
  }, {
    key: 'update',
    value: function update() {
      this.hue += 0.5;

      for (var key in this.sh.cells) {
        var _combined, _combined2, _combined3, _combined4, _combined5, _combined6, _combined7, _combined8, _combined9;

        this.combined.length = 0;
        var cell = this.sh.cells[key];
        cell && (_combined = this.combined).push.apply(_combined, _toConsumableArray(cell.items));
        var cellNW = this.sh.cells[cell.x - 1 + '-' + (cell.y - 1)];
        cellNW && (_combined2 = this.combined).push.apply(_combined2, _toConsumableArray(cellNW.items));
        var cellN = this.sh.cells[cell.x + '-' + (cell.y - 1)];
        cellN && (_combined3 = this.combined).push.apply(_combined3, _toConsumableArray(cellN.items));
        var cellNE = this.sh.cells[cell.x + 1 + '-' + (cell.y - 1)];
        cellNE && (_combined4 = this.combined).push.apply(_combined4, _toConsumableArray(cellNE.items));
        var cellW = this.sh.cells[cell.x - 1 + '-' + cell.y];
        cellW && (_combined5 = this.combined).push.apply(_combined5, _toConsumableArray(cellW.items));
        var cellE = this.sh.cells[cell.x + 1 + '-' + cell.y];
        cellE && (_combined6 = this.combined).push.apply(_combined6, _toConsumableArray(cellE.items));
        var cellSW = this.sh.cells[cell.x - 1 + '-' + (cell.y + 1)];
        cellSW && (_combined7 = this.combined).push.apply(_combined7, _toConsumableArray(cellSW.items));
        var cellS = this.sh.cells[cell.x + '-' + (cell.y + 1)];
        cellS && (_combined8 = this.combined).push.apply(_combined8, _toConsumableArray(cellS.items));
        var cellSE = this.sh.cells[cell.x + 1 + '-' + (cell.y + 1)];
        cellSE && (_combined9 = this.combined).push.apply(_combined9, _toConsumableArray(cellSE.items));
        var j = this.combined.length;
        while (j--) {
          var item = this.combined[j];
          var k = j;
          while (k--) {
            var other = this.combined[k];
            item.compareOther(other);
          }
        }
      }

      var i = this.points.length;
      while (i--) {
        var point = this.points[i];
        point.update(i);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'hsla(0, 0%, 5%, 1)';
      this.ctx.fillRect(0, 0, this.width, this.height);

      this.ctx.globalCompositeOperation = 'lighter';

      this.ctx.beginPath();
      for (var x = 0; x < this.width; x += this.sh.cellSize) {
        this.ctx.moveTo(x, 0);
        this.ctx.lineTo(x, this.height);
      }
      for (var y = 0; y < this.height; y += this.sh.cellSize) {
        this.ctx.moveTo(0, y);
        this.ctx.lineTo(this.width, y);
      }
      this.ctx.strokeStyle = 'hsla(0, 0%, 100%, 0.05)';
      this.ctx.stroke();

      var mxc = math.floor(this.mouse.x / this.sh.cellSize);
      var myc = math.floor(this.mouse.y / this.sh.cellSize);

      for (var key in this.sh.cells) {
        var cell = this.sh.cells[key];
        var length = cell.items.length;
        cell.alphaTarget = length * 0.04;
        var b = 50;
        var s = 70;
        if (cell.x === mxc && cell.y == myc) {
          b = 70;
          s = 100;
          cell.alphaTarget = 1;
          cell.alpha = 1;
        }
        cell.alpha += (cell.alphaTarget - cell.alpha) * 0.1;
        this.ctx.fillStyle = 'hsla(' + (this.hue + cell.y * this.sh.cellSize * 0.15 + cell.x * this.sh.cellSize * 0.15) + ', ' + s + '%, ' + b + '%, ' + cell.alpha + ')';
        this.ctx.fillRect(cell.x * this.sh.cellSize, cell.y * this.sh.cellSize, this.sh.cellSize, this.sh.cellSize);
      }

      // draw points
      var i = this.points.length;
      while (i--) {
        var point = this.points[i];
        point.render();
      }

      if (this.capturing) {
        this.capturer.capture(this.canvas);
      }
    }
  }, {
    key: 'loop',
    value: function loop() {
      var _this2 = this;

      this.currTime = Date.now();
      if (this.oldTime) {
        this.dt = (this.currTime - this.oldTime) / (1000 / 60);
      }
      this.oldTime = this.currTime;
      this.preupdate();
      this.update();
      this.render();
      window.requestAnimationFrame(function () {
        return _this2.loop();
      });
    }
  }]);

  return Demo;
}();

var demo = new Demo();
  </script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
专栏目录
HTML炫酷烟花秀
兔子王
06-04 7万+
HTML炫酷的跨年烟花秀完整代码。
HTML橙色动态粒子爱心
热门推荐
兔子王
05-26 8万+
HTML橙色动态爱心完整代码。
html--最炫酷粒子
stqer的博客
04-17 401
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
黑色炫酷粒子html网站源码
lisihui12345的博客
04-20 209
介绍： 右键记事本打开修改内容，上传到服务器就能打开使用 这种单页的建议用做404页面比较好看！ 简约嘛~ 网盘下载地址： http://kekewl.org/jnYkGlGI4u1 图片：
HTML炫酷粒子源代码
qq_47654010的博客
07-23 1万+
HTML炫酷粒子源代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html,body{ margin:0px; width:100%; height:100%;
html5超炫酷粒子效果,HTML5超炫酷粒子效果的进度条的实现示例
weixin_36330387的博客
06-03 690
分享几种极具创意的HTML5/CSS3进度条特效20% 40% 60% 80% 100% 从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。 CSS代码： .progress {首先，我们制作的这个进度条并没有后台数据作为支撑，所以是...
html粒子代码灵感。
Abby1225的博客
07-07 616
首先，确保你的 `particlesjs-config.json` 文件包含 `interactivity` 部分，并且你已经定义了 `events` 下的 `onclick` 事件。现在，当你的网页加载时，`particles.js` 将会创建一个带有粒子动画的canvas元素，并且当你点击粒子时，会触发一个气泡效果。为了创建一个粒子效果，你可以使用像 `particles.js` 这样的JavaScript库，它允许你通过简单的配置来生成复杂的粒子动画。区块包含了文档的元数据和样式链接。
html炫酷js粒子动画,html5 轻量级炫酷 js 粒子动画库
weixin_39631094的博客
06-07 100
QarticlesA lightweight and high performance JavaScript library for creating particles Live DemosHow to Usebasicvar qarticles = new Qarticles(document.getElementById('cov'))advancedvar covColorFuc = fu...
黑色炫酷粒子动态html网站源码
banzhuan678的博客
04-23 830
介绍： 右键记事本打开修改内容，上传到服务器就能打开使用 这种单页的建议用做404页面比较好看! 简约嘛~可以去看看网站源码哦！ 改版权在index.html页面里 网盘下载地址： http://kekewl.cc/8uR1UENZvXA0 图片： ...
html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar
06-23
html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙...
【HTML炫酷粒子风暴】-老李出品
01-18
【HTML炫酷粒子风暴】---老李出品 粒子风暴【非常炫酷】还不快去在你的好友面前装X
HTML炫酷粒子（追光者）.zip
10-03
HTML炫酷粒子效果，通常指的是利用JavaScript库或者CSS3技术创建的一种动态视觉表现形式，它通过大量的小元素在页面上动态移动、变换，营造出炫丽的视觉效果。这种效果常用于网站背景、头像框、按钮动画等，能够提升...
HTML炫酷多彩粒子特效（可执行代码+效果演示）.zip
03-18
HTML炫酷多彩粒子特效是一种利用前端技术来创建动态视觉效果的方法。这种特效通常基于JavaScript库，如Particle.js、Three.js或者Canvas API，为网站添加引人注目的背景或交互元素，提升用户体验。在这个资源包中，...
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1076
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 143
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 919
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1222
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
DOM Comment: Understanding the Power of HTML Comments in Web Development
wjs2024的博客
09-30 733
【代码】DOM Comment: Understanding the Power of HTML Comments in Web Development。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值