多彩粒子空间自由跳动效果-html代码-BFW代码库

多彩粒子空间自由跳动效果

代码语言：html

所属分类：粒子

代码描述：多彩粒子空间自由跳动效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
div {
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  color: hsl(var(--h, 343), 100%, 50%);
  border-radius: 50%;
  mix-blend-mode: normal;
  background: currentColor;

  //border: .46vmin double currentColor;
}
main {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  margin: auto;
}
html,
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
body {
  display: flex;
  background: hsl(233, 100%, 10%);
}
* {
  box-sizing: border-box;
}
</style>

</head>
<body translate="no">
<main></main>

<script >
if (document.body.animate) {
  const main = document.querySelector("main");

  for (let i = 0; i < 200; ++i) {
    const l = document.createElement("div");
    const sx1 = Math.random() * 100;
    const sx2 = Math.random() * 100;
    const sy1 = Math.random() * 100;
    const sy2 = Math.random() * 100;
    const sr1 = Math.random();
    const sr2 = Math.random(.........完整代码请登录后点击上方下载按钮下载查看