科幻片粒子盾牌粒子流动动画效果
代码语言:html
所属分类:粒子
代码描述:科幻片粒子盾牌粒子流动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
margin: 0;
overflow: hidden;
background: #151a28;
}
canvas {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body translate="no">
<script>
/*
* Noel Delgado - @pixelia_me
*/
(function () {
var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, random, lineWidth, C,
rings, ringsLength, data;
ctx = document.createElement('canvas').getContext('2d');
w = 600;
h = 600;
cx = w / 2;
cy = h / 2;
rings = [];
ringsLength = 0;
PI = Math.PI;
PI_HALF = PI / 2;
cos = Math.cos;
sin = Math.sin;
random = Math.random;
lineWidth = 0.2;
C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
data = [
/* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
[
{ t: 80, r: cx - 10, d: 40, s: 30, c: C[1] },
{ t: 60, r: cx - 20, d: 40, s: 80, c: C[2] },
{ t: 20, r: cx - 30, d: 20, s: 80, c: C[2] }],
[
{ t: 80, r: cx - 80, d: 40, s: 40, c: C[4] },
{ t: 80, r: cx - 90, d: 20, s: 40, c: C[4] },
{ t: 20, r: cx - 100, d: 20, s: 40, c: C[2] },
{ t: 40, r: cx - 110, d: 20, s: 40, c: C[2] }],
[
{ t: 60, r: cx - 160, d: 40, s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0