canvas实现粒子泡泡汇聚拼凑成文字鼠标悬停避让动画效果代码-html代码-BFW代码库

canvas实现粒子泡泡汇聚拼凑成文字鼠标悬停避让动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子泡泡汇聚拼凑成文字鼠标悬停避让动画效果代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    font-size: 0;
  }
  body section {
    background: url(../img/bcg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-weight: 700;
  }
  body section canvas {
    width: 100vw;
    height: 100vh;
  }
</style>
</head>
<body>


    <section id="ci-particles">
      <canvas id="canvas"></canvas>
      <h1 id="headline">新年快乐</h1>
    </section>   

	<script >

var canvas = document.querySelector("#canvas"),
    ctx = canvas.getContext("2d"),
    link = document.createElement('link');
    particles = [],
    amount = 0,
    mouse = { x: -9999, y: -9999 },
    radius = 1,
    colors = [
      "rgba(252,248,254,0.85)", 
      "rgba(220,203,255,0.75)", 
      "rgba(154,112,124,0.85)", 
      "rgba(192,213,255,0.85)", 
      "rgba(244,223,254,0.75)"
    ],
    headline = document.........完整代码请登录后点击上方下载按钮下载查看