simplex-noise曲线动画效果代码
代码语言:html
所属分类:动画
代码描述:simplex-noise曲线动画效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; overflow: hidden; background: black; } body:before { content: ""; width: var(--radius); height: var(--radius); --shadow: calc(var(--radius) *.1); position: absolute; top: 50%; left: 50%; z-index: 2; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 var(--shadow) var(--shadow) black, 0 0 0 10px black; } body:after { content: ""; width: var(--radius); height: var(--radius); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; border-radius: 50%; mix-blend-mode: overlay; } canvas { border-radius: 50%; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); position: relative; z-index: 1; } .tp-dfwv { z-index: 10; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweakpane.3.02.js"></script> <script> /*-------------------- Setup --------------------*/ const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let time = 0; const devicePixelRatio = window.devicePixelRatio || 1; const simplex = new SimplexNoise(); const o = { radius: 300, segments: 40, rows: 45, amplitude: 75, speed: 0.5, noise: 0.023, opacity: .3, shadow: .3 }; /*-------------------- Resize --------------------*/ const onResize = () => { canvas.width = o.radius * devicePixelRatio; canvas.height = o.radius * devicePixelRati.........完整代码请登录后点击上方下载按钮下载查看
网友评论0