炫酷Canvas 3D线条动画特效

所属分类:其他-动画效果

 63696  596  查看评论 (13)
分享到微信朋友圈
X
炫酷Canvas 3D线条动画特效 ie兼容10

使用教程

一款基于three.js的 HTML5 canvas3D线条动画特效。该3D线条动画特效可以用鼠标进行互动,canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner,效果会非常的酷。

下面是该3D线条特效的基本HTML结构。

使用方法

使用该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>

完成上面的步骤之后,该插件就可以正常工作了。

这个插件可以完全自定义颜色、线条、透明度和透视度等属性,但是这些都需要在3d-lines-animation.js文件中修改相应的代码,插件本身并没有提供相应的参数。


相关插件-动画效果

CSS3按钮发光动画 绚丽多彩

CSS3按钮发光动画 绚丽多彩
  动画效果
 49760  419

jquery漫画果树文字

jquery漫画果树文字果实标签树上掉下文字果实标签效果代码
  动画效果
 35894  503

jQuery制作360度旋转雷达扫描动画

这是一款带科技感的jQuery制作360度旋转雷达扫描动画特效,雷达扫描信息认证动画效果。
  动画效果
 29277  367

jQuery钱飘落效果

jQuery页面撒钱效果,代码很简单修改方便,想要别的效果可以替换图片比如落叶
  动画效果
 27468  322

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    人生在世、食之性也 0
    2019/11/21 15:16:26
    依赖文件记得放到下面去,放上面会报错不生效的 回复
    薇・安好 0
    2018/5/9 16:57:31
    可惜在IE下面不出来哇 回复
    拿破仑007 0
    2018/1/29 16:42:26
    能让它自动动起来么,不用鼠标经过 回复
    任贤齐 0
    2017/6/5 16:53:18

    你好哦,作者,这个效果放到手机端不能下滑或者很难下滑,这个问题怎么解决??

    回复
    福寿禄 0
    2017/5/10 9:11:12

    效果够炫酷,就是项目中很少会用到

    回复
    张安 0
    2017/3/30 3:13:51
    上传服务器后完全没有效果,本地没有问题 回复
    teng12 0
    2017/2/20 10:36:11
    白白白白菜 0
    2016/12/24 16:12:12
    能改为全屏吗,做壁纸一定很好
        jiangwenzhuo0
        2018/5/24 17:14:30
        高度:auto
    回复
    [!..!] 0
    2016/11/21 18:11:56
    这个背景色在哪里 改
        西瓜0
        2016/11/22 9:11:53

        color.js中。

        var colors = new Array([62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
    回复
    A 仁太 "   0
    2016/9/13 23:09:05
    顶,只是可惜图形不能3D旋转啊,感觉空间度不够.但是背景变化肯定可以迷死很多人~ 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复