regl实现多色方块粒子组成数字翻转动画效果

代码语言:html

所属分类:三维

代码描述:regl实现多色方块粒子组成数字翻转动画效果

代码标签: 方块 粒子 组成 数字 翻转 动画 效果

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

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

<style>
html,
body {
	height: 100%;
}

body {
	background-image: radial-gradient(ellipse at center, #2c0c00 8.0%, #000 100.0%);
	background-size: 160% 160%;
	background-position: 50% 50%;
	overflow: hidden;
}

h1 {
	position: relative;
	z-index: 1;
	color: rgb(255, 94, 30);
	font-family: 'Luckiest Guy', sans-serif;
	font-size: min(8vw, 64px);
	text-align: center;
	top: 65vh;
}

img {
	display: none;
}
</style>

</head>
<body translate="no">
<h1>Followers!</h1>
<img src="data:image/png;base64,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" />
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/regl.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
<script>
console.clear();

////////////
// CONFIG //
////////////

// Affects number of cubes generated
const DENSITY = 1;
const LAYERS = 5;
// Colors are in rgb format
const COLORS = [
	[1.000, 0.655, 0.231],
	[1.000, 0.365, 0.114],
	[0.898, 0.078, 0.392],
	[0.424, 0.5, 0.114]
];
const GAMMA.........完整代码请登录后点击上方下载按钮下载查看

网友评论0