基于three.js的炫酷Canvas 3D线条动画特效
简要教程 复制代码 复制代码
html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。该3D线条动画特效可以用鼠标进行互动，canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner，效果会非常的酷。
查看演示 下载插件
使用方法
使用该3D线条动画特效需要引入下面的依赖文件。- <!-- Main library -->
- <script src="js/three.min.js"></script>
- <!-- Helpers -->
- <script src="js/projector.js"></script>
- <script src="js/canvas-renderer.js"></script>
- <!-- Visualitzation adjustments -->
- <script src="js/3d-lines-animation.js"></script>
- <!-- Animated background color -->
- <script src="js/jquery/2.0.2/jquery.min.js"></script>
- <script src="js/color.js"></script>
HTML结构
下面是该3D线条特效的基本HTML结构。- <div class="canvas-wrap">
- <div class="canvas-content">
- <h1>Hello world</h1>
- </div>
- <div id="canvas" class="gradient"></div>
- </div>
完成上面的步骤之后，该插件就可以正常工作了。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
