three打造的3d旋转加载动画特效
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Loader animation</title> <style> #loader canvas { width: 320px; height: 320px; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #275EFE; } body .dribbble { position: fixed; display: block; right: 24px; bottom: 24px; } body .dribbble img { display: block; width: 76px; } </style> </head> <body translate="no"> <div id="loader"> <canvas></canvas> </div> <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script> <script> $(document).ready(function () { let $canvas = $('#loader canvas'), canvas = $canvas[0], renderer = new THREE.WebGLRenderer({ canvas: canvas, context: canvas.getContext('webgl2'), antialias: true, alpha: true }); renderer.setSize($canvas.width(), $canvas.height()); renderer.setPixelRatio(window.devicePixelRatio || 1); let scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, $canvas.width() / $canvas.height(), 0.1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0