zdog实现立体方块跳跃点亮矩阵方块动画效果代码
代码语言:html
所属分类:动画
代码描述:zdog实现立体方块跳跃点亮矩阵方块动画效果代码
代码标签: zdog 实现 立体 方块 跳跃 点亮 矩阵 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body { color: hsl(209 61% 16%); background: hsl(200 88% 90%); min-block-size: 100svb; display: grid; place-items: center; } body { background-size: 32px; background-repeat: no-repeat; background-position: bottom 10px right 16px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 1 1">\ <path fill="hsl(196 94% 67%)" d="M -0.5 -0.25 0 -0.5 0.5 -0.25 0 0" />\ <path fill="hsl(202 83% 41%)" d="M 0 0.5 0.5 0.25 0.5 -0.25 0 0" />\ <path fill="hsl(199 84% 55%)" d="M -0.5 0.25 0 0.5 0 0 -0.5 -0.25" />\ </svg>'); } </style> </head> <body translate="no"> <canvas style="display: block; inline-size: 100%; max-inline-size: 500px" width="500" height="300"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script> const { Anchor, Box, TAU } = Zdog; const sineOut = t => Math.sin(t * Math.PI / 2); (() => { const element = document.querySelector("canvas"); const context = element.getContext("2d"); const { width, height } = element; const zoom = 8; const columns = 7; const rows = 7; const jumps = [1, 1, 1, -1, -1, -1, 2, -2]; const lift = 3; const size = 5; const gap = 6; const innerSize = size / 2.5; const root = new Anchor(); const colors = { boxes: { color: "hsl(209 34% 30%)", leftFace: "hsl(209 61% 16%)", frontFace: "hsl(211 39% 23%)" }, box: { color: "hsl(202 83% 41%)", x: "hsl(199 84% 55%)", y: "hsl(196 94% 67%)" } }; const { color, leftFace, frontFace } = colors.boxes; const boxes = new Anchor({ addTo: root }); for (let i = 0; i < rows; i++) { for (let j = 0; j < columns; j++) { const x = j * gap; const z = i * gap * -1; new Box({ addTo: boxes, color, leftFace, frontFace, stroke: 0, width: size, height: size, depth: size, translate: { x, z } }); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0