电路板流动动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <title>CodePen - Techy Nodes</title> <style> html, body { height: 100%; overflow: hidden; } canvas { line-height: 0; margin-bottom: 0; } .nodes-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cache-canvas { background-color: #6622ff; } .main-canvas { opacity: 1; } .connection-paths { display: none; position: absolute; top: 0; left: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%); transform: translate(-50%); } .connection-path { stroke: white; stroke-width: 2px; fill: none; } .center { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .message-text { text-align: center; color: #6622ff; font-size: 30vw; font-weight: 700; letter-spacing: -0.06em; line-height: 0; } .emblem { border-radius: 50%; height: 35vw; width: 35vw; background-color: #32e4b0; } </style> </head> <body translate="no"> <canvas id="cache-canvas" class="nodes-canvas cache-canvas"></canvas> <canvas id="main-canvas" class="nodes-canvas main-canvas"></canvas> <script src='http://repo.bfw.wiki/bfwrepo/js/dat.gui.min.js'></script> <script> const cacheCanvas = document.getElementById('cache-canvas'); const canvas = document.getElementByI.........完整代码请登录后点击上方下载按钮下载查看
网友评论0