three+TweenMax实现棒棒糖鲜花飘落堆积文字动画效果代码
代码语言:html
所属分类:动画
代码描述:three+TweenMax实现棒棒糖鲜花飘落堆积文字动画效果代码
代码标签: three TweenMax 棒棒糖 鲜花 飘落 堆积 文字 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Corben:700"); html, body { margin: 0; overflow: hidden; height: 100%; width: 100%; background-color: #032C3F; } .title { position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .title h1 { font-size: 5vw; display: inline-block; color: #032C3F; width: auto; font-family: "Corben", cursive; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script> "use strict"; console.clear(); TweenMax.lagSmoothing(0); let colors = { background: '#032C3F' }; let getRandomFromArray = function (arr) { return arr[Math.floor(Math.random() * arr.length)]; }; class Stage { constructor() { // container this.onResize = function () { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); }; this.render = function () { this.renderer.render(this.scene, this.camera); }; this.add = function (elem) { this.scene.add(elem); }; this.remove = function (elem) { this.scene.remove(elem); }; thi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0