svg+js实现粒子水母动画效果代码-html代码-BFW代码库

svg+js实现粒子水母动画效果代码

代码语言：html

所属分类：粒子

代码描述：svg+js实现粒子水母动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lora', serif;
}

:root {
    --sky-blue: #0e85b5;
    --dark: #181818;
}

body {
    display: grid;
    font-family: 'Silkscreen', sans-serif;
    color: white;
    background: var(--dark);
    justify-items: center;
    user-select: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

svg {
    justify-self: stretch;
    align-self: stretch;
    background: #181818;
}

.free {
    display: none;
    visibility: hidden;
}
</style>




</head>

<body >
  <svg id="image" viewBox="-0.5 -0.5 1 1">
    <circle class="point" r="5" stroke="aqua" stroke-width="0.005" fill="#181818" />
    <rect fill="none" stroke="#555" stroke-width="0.001" x="-0.3" y="-0.3" width="0.6" height="0.6" />
</svg>

  
      <script type="module">
// Oscar Saharoy 2023


// ======================== math


export const range = (n) =>
Object.keys(Array(n).fill(0)).map(parseFloat);

export function sum(arr) {
  return arr.reduce((acc, val) => acc + val, 0);
}


export const rotateX = (theta) =>
[[1, 0, 0],
[0, Math.cos(theta), -Math.sin(theta)],
[0, Mat.........完整代码请登录后点击上方下载按钮下载查看