线条伸展动画背景效果
代码语言:html
所属分类:背景
代码描述:线条伸展动画背景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
background-color: #000;
margin:0;
padding:0;
border-width:0;
cursor: pointer;
}
</style>
</head>
<body translate="no">
<script >
"use strict";
/* As I am beginning this pen, my idea is to imitate
Electric Field Lines (https://codepen.io/EpicCoder_2002/pen/KERjgm)
by Ahmed Eltaher (https://codepen.io/EpicCoder_2002)
*/
window.addEventListener("load", function () {
const AVG_SURFACE = 10000; // pixels²
const RADIUS = 2;
const COLOR_POS = '#ff0000';
const COLOR_NEG = '#0000ff';
const PART_MIN = 10; // min number of particles starting from each positive source
const PART_MAX = 50; // max number of particles starting from each positive source
const SPEED_ANIM = 1;
const SPEED_PART = 1;
let canv, ctx; // canvas and context
let maxx, maxy; // canvas dimensions
let nbPos, nbNeg;
let arrPos, arrNeg;
let particles;
let nbPart;
// for animation
let tStampRef; // time stamp ref for animation
let events;
// shortcuts for Math.
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.rou.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0