zdog实现一个控制蜜蜂飞行效果代码
代码语言:html
所属分类:动画
代码描述:zdog实现一个控制蜜蜂飞行效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; background-color: #ccf3eb; overflow: hidden; position: relative; font-family: "Nunito", sans-serif; text-transform: uppercase; color: #707070; } .btn { cursor: pointer; background-color: transparent; padding: 5px 10px; border: none; } a { text-decoration: none; font-weight: 600; color: inherit; color: #eeaa00; } .controls { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: max-content; display: flex; justify-content: center; z-index: 2; } .credit { position: absolute; top: 4%; left: 4%; width: max-content; padding: 10px; font-size: 0.8rem; } .active { color: #eeaa00; pointer-events: none; } </style> </head> <body > <canvas class="scene"></canvas> <div class="credit"> <p>made with <a href="https://zzz.dog/" target="blank">Z-dog</a></p> </div> <div class="controls"> <button class="btn" id="bankLeft">bank left</button> <button class="btn" id="bankRight">bank right</button> <button class="btn" id="rollLeft">barrel roll left</button> <button class="btn" id="rollRight">barrel roll right</button> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script > const TAU = Zdog.TAU; const BLACK = "#3D3D3D"; const YELLOW = "#F2EA00"; const WHITE = "#FEFEFE"; let ctx = document.querySelector("canvas"); ctx.width = 800; ctx.height = 600; // Z-DOG STUFF //-------------------------------------------------/ let scene = new Zdog.Illustration({ element: ".scene", dragRotate: false }); // BEE let BEE = new Zdog.Anchor({ addTo: scene }); // HEAD let head = new Zdog.Shape({ addTo: BEE, stroke: 80, color: BLACK }); // EYES let eyeGroup = new Zdog.Group({ addTo: head, translate: { x: -35, z: 20 }, rotate: { y: TAU / 8 } }); let pupil = new Zdog.Ellipse({ addTo: eyeGroup, diameter: 35, fill: true, color: WHITE }); let iris = new Zdog.Ellipse({ addTo: pupil, diameter: 20, fill: true, color: BLACK }); eyeGroup.copyGraph({ translate: { x: 35, z: 20 }, rotate: { y: -TAU / 8 } }); // ANTLERS let antlerAnchor = new Zdog.Anchor({ addTo: head, translate: { y: -40 } }); let leftAntler = new Zdog.Shape({ addTo: antlerAnchor, path: [ { y: 0, x: -10, z: 0 }, { y: -30, x: -18, z: -12 }], stroke: 10, color: BLACK }); let rightAntler = new Zdog.Shape({ addTo: antlerAnchor, path: [ { y: 0, x: 10, z: 0 }, { y: -30, x: 18,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0