canvas文字方块化闪动粒子动画效果代码-html代码-BFW代码库

canvas文字方块化闪动粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas文字方块化闪动粒子动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
#input {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 8em;
  max-width: 80%;
  background: none;
  border: none;
  outline: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 3em;
  text-align: center;
  z-index: 999;
  opacity: 0.25;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}
#input:hover, #input:focus {
  opacity: 1;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
</style>

 

</head>

<body  >
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<input type="text" id="input" placeholder="type whatever" value="#countdown" title="type and press enter" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/underscore.js"></script>
      <script >
const STEP_LENGTH = 1;
const CELL_SIZE = 10;
const BORDER_WIDTH = 2;
const MAX_FONT_SIZE = 500;
const MAX_ELECTRONS = 100;
const CELL_DISTANCE = CELL_SIZE + BORDER_WIDTH;

// shorter for brighter paint
// be careful of performance issue
const CELL_REPAINT_INTERVAL = [
300, // from
500 // to
];

const BG_COLOR = '#1d2227';
const BORDER_COLOR = '#13191f';
const CELL_HIGHLIGHT = '#328bf6';
const ELECTRON_COLOR = '#00b07c';
const FONT_COLOR = '#ff5353';

const FONT_FAMILY = 'Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuan Yi Micro Hei", sans-serif';

const DPR = window.devicePixelRatio || 1;

const ACTIVE_ELECTRONS = [];
const PINN.........完整代码请登录后点击上方下载按钮下载查看