鼠标跟随文字三维散落视觉差异特效-html代码-BFW代码库

鼠标跟随文字三维散落视觉差异特效

代码语言：html

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

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


<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  @import "https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto:400";
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #1f263b;
  background: -moz-linear-gradient(top, #1f263b 0%, #2c3654 100%);
  background: -webkit-linear-gradient(top, #1f263b 0%, #2c3654 100%);
  background: linear-gradient(to bottom, #1f263b 0%, #2c3654 100%);
}

div.absolute-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: all .5s;
}

h3, h5 {
  padding: 10px 30px 10px 30px;
  box-sizing: border-box;
  background: white;
  box-shadow: 0 0 5px 0 black;
  font-family: 'Open Sans';
  font-weight: 300;
  text-align: center;
  letter-spacing: 3px;
}

span#close {
  position: absolute;
  top: -15px;
  left: -30px;
  color: white;
  font-size: 30px;
  text-shadow: 0 0 5px black;
  cursor: pointer;
}
</style>

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

<script>
      //ninivert, September 2016

/*VARIABLES*/

canvas = document.getElementsByTagName('canvas')[0];
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

var ctx = canvas.getContext('2d');



/*Modify options here*/

//possible characters that will appear
var characterList = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

//stocks possible character attributes
var layers = {
  n: 5, //number of layers
  letters: [100, 40, 30, 20, 10], //letters per layer (starting from the deepest layer)
  coef: [0.1, 0.2, 0.4, 0.6, 0.8], //how much the letters move from the mouse (starting from the deepest layer)
  size: [16, .........完整代码请登录后点击上方下载按钮下载查看