bodymovin+TweenMax实现不同路面坡度骑自行车姿态动画代码
代码语言:html
所属分类:动画
代码描述:bodymovin+TweenMax实现不同路面坡度骑自行车姿态动画代码
代码标签: bodymovin TweenMax 不同 路面 坡度 骑 自行车 姿态 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { width: 100vw; height: 100vh; margin: 0; background-color: #61e8e1; overflow: hidden; position: relative; } .bm_container { width: 100%; height: 60%; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; } .background_layers { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .background_layers .svg_layer { position: absolute; width: 200%; height: 200%; left: -50%; right: 0; bottom: 0; } .background_layers .fg { top: 25%; background: url("//repo.bfw.wiki/bfwrepo/svg/bike/codevember11_fg.svg") repeat-x; background-position: 0px 100px; background-size: 1920px; transform-origin: center 25%; } .background_layers .mg { top: 20%; background: url("//repo.bfw.wiki/bfwrepo/svg/bike/codevember11_mg.svg") repeat-x; background-position: 0px 0px; background-size: 1920px; transform-origin: center 20%; } .background_layers .bg { top: 0%; background: url("//repo.bfw.wiki/bfwrepo/svg/bike/codevember11_bg.svg") repeat-x; background-size: 1920px; } .background_layers .road { background-color: grey; top: 70%; transform-origin: top; } .angle_container { position: absolute; bottom: 0; height: 20%; width: 100%; } .angle_container .dial { height: 100px; width: 100px; margin: auto; bottom: 5px; position: absolute; left: 0; right: 0; background: url("//repo.bfw.wiki/bfwrepo/svg/bike/cyclist_dial.svg") no-repeat; background-position: bottom; } .dragSVG { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .dragger { -webkit-tap-highlight-color: transparent; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="background_layers"> <div class="svg_layer bg"></div> <div class="svg_layer mg"></div> <div class="svg_layer fg"></div> <div class="svg_layer road"></div> </div> <div class='bm_container'></div> <div class="angle_container"> <div class="dial"></div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bodymovin.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.1.20.3.js"></script> <script> var animData = { wrapper: document.querySelector(".bm_container"), animType: "svg", loop: true, prerender: true, autoplay: true, path: "//repo.bfw.wiki/bfwrepo/svg/bike/codevember9.json" }; var anim = bodymovin.loadAnimation(animData); anim.addEventListener("DOMLoaded", startAnimation); anim.setSpeed(1); bodymovin.setSubframeRendering(false); var dial = document.querySelector(".dial&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0