js实现一个跟随鼠标彩色粒子轨迹动画HTMLElement Web组件效果代码

代码语言:html

所属分类:粒子

代码描述:js实现一个跟随鼠标彩色粒子轨迹动画HTMLElement Web组件效果代码,继承HTMLElement 。

代码标签: js 跟随 鼠标 彩色 粒子 轨迹 动画 HTMLElement Web 组件

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  display: grid;
  color: white;
  background: black;
}
</style>


  
  
</head>

<body translate="no">
  <pointer-particles></pointer-particles>
  
      <script >
class PointerParticle {
  constructor(spread, speed, component) {
    const { ctx, pointer, hue } = component;

    this.ctx = ctx;
    this.x = pointer.x;
    this.y = pointer.y;
    this.mx = pointer.mx * 0.1;
    this.my = pointer.my * 0.1;
    this.size = Math.random() + 1;
    this.de.........完整代码请登录后点击上方下载按钮下载查看

网友评论0