基于HTML5canvas的three.js3D线条动画特效源码.zip资源-CSDN文库

共15个文件

js：6个

css：2个

jpg：2个

版权申诉

181 浏览量 2022-11-09 22:29:55 上传评论收藏 181KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于HTML5 canvas的three.js 3D线条动画特效源码.zip （15个子文件）

132686847584426763

HTML5_canvas+three.js

css

default.css 6KB

normalize.css 2KB

2.jpg 20KB

1.jpg 23KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 3KB

3d-lines-animation.js 5KB

color.js 2KB

canvas-renderer.js 24KB

projector.js 20KB

three.min.js 410KB

jquery-2.1.1.min.js 82KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>基于three.js的炫酷Canvas 3D线条动画特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <style> body { background-color: #fff; margin: 0px; /*overflow: hidden;*/ font-family:arial; color:#fff; } h1{ margin:0; } a { color:#0078ff; } #canvas{ width:100%; height:500px; overflow: hidden; position:absolute; top:0; left:0; background-color: #1a1724; } .canvas-wrap{ position:relative; } div.canvas-content{ position:relative; z-index:2000; color:#fff; text-align:center; padding-top:30px; } </style>  </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>基于three.js的炫酷Canvas 3D线条动画特效 <span>A 3D lines animation with three.js</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> </div> <section class="canvas-wrap"> <div class="canvas-content"> <h1>3D lines animation with three.js</h1> </div> <div id="canvas" class="gradient"></div> </section>  <script src="js/three.min.js"></script>  <script src="js/projector.js"></script> <script src="js/canvas-renderer.js"></script>  <script src="js/3d-lines-animation.js"></script> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script> <script src="js/color.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉