meowgine实现模拟物理碰撞小球动画效果代码
代码语言:html
所属分类:动画
代码描述:meowgine实现模拟物理碰撞小球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap"); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; height: 100vh; display: flex; overflow: hidden; align-items: center; justify-content: center; background-color: #fafafa; font-family: "Josefin Sans", sans-serif; } .container { width: 80vmin; background-color: #fafafa; border: 0.3vmin solid rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 1vmin #fafafa, 1vmin 1vmin 0 1vmin rgba(0, 0, 0, 0.3); } .viewbox { display: block; } .text { position: absolute; color: rgba(0, 0, 0, 0.3); font-size: 10vmin; } </style> </head> <body> <main class="container"> <canvas class="viewbox"></canvas> </main> <span class="text">Solid</span> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/meowgine.min.js"></script> <script> (() => { "use strict"; let viewbox = {}; let ball = {}; const init = () => { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0