HTML5特效集合，集合了几十种HTML5特效

共115个文件

jpg：39个

gif：34个

html：23个

HTML5特效

1星需积分: 5 182 浏览量 2023-10-13 08:23:20 上传评论收藏 3.03MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5特效集合，集合了几十种HTML5特效（115个子文件）

map_001.gif 3KB

map.gif 3KB

oam20.gif 2KB

sp32r.gif 2KB

oam24.gif 2KB

oam8.gif 2KB

Glob4.gif 2KB

oam5.gif 1KB

oam35.gif 1KB

oam3.gif 1KB

oam28.gif 1KB

oam32.gif 1KB

oam6.gif 1KB

oam2.gif 1KB

oam25.gif 1KB

oam14.gif 1KB

oam10.gif 1KB

oam52.gif 1KB

oam50.gif 1KB

oam51.gif 1KB

oam17.gif 1019B

oam19.gif 1010B

oam11.gif 974B

oam9.gif 922B

oam1.gif 919B

oam18.gif 909B

oam22.gif 901B

oam23.gif 861B

oam27.gif 855B

oam27_001.gif 855B

oam38.gif 843B

oam16.gif 839B

oam4.gif 835B

oam33.gif 816B

bspTree.html 24KB

H-menu.html 11KB

scene-3D-room-menu.html 11KB

cube-rotate-3D.html 11KB

yoshisland-menu.html 11KB

draw3D-auto.html 10KB

ragdollengine-line.html 10KB

grid-deform-menu.html 9KB

imgPress-canvas.html 8KB

fluid-js-canvas.html 7KB

VG-canvas.html 6KB

index.html 6KB

robot-arm-ik.html 6KB

photo3D-2.html 6KB

lensIM-svg.html 6KB

water-particles-canvas.html 5KB

grid-deform.html 5KB

box2D.html 5KB

fingers.html 4KB

blob-particles-canvas.html 4KB

DOM_waves.html 4KB

mTrail-svg.html 3KB

fractal-F.html 3KB

favicon.ico 4KB

ct133.jpg 176KB

ci38.jpg 148KB

spellcraft.jpg 142KB

pyre.jpg 136KB

ct132.jpg 131KB

ct05.jpg 130KB

sf42.jpg 129KB

ct14.jpg 119KB

3D-eyes-big.jpg 116KB

ct33.jpg 116KB

ct23.jpg 114KB

go26.jpg 98KB

pr07.jpg 97KB

whitemagic.jpg 92KB

go21.jpg 88KB

pr04.jpg 83KB

gazebo2k3.jpg 81KB

ct15.jpg 78KB

newborn.jpg 72KB

ct07.jpg 64KB

pr01.jpg 63KB

pr03.jpg 59KB

pr02.jpg 59KB

majesty.jpg 54KB

df17.jpg 54KB

N3.jpg 53KB

ct11.jpg 46KB

caisse_explosive_f2.jpg 44KB

singularity.jpg 37KB

caisse_coke_f2.jpg 35KB

caisse_bois_frag3.jpg 29KB

caisse_export.jpg 28KB

ct35.jpg 27KB

frame0.jpg 25KB

caisse_jurancon_face1.jpg 23KB

caisse_orange_face1.jpg 21KB

caisse_jurancon_face2.jpg 21KB

frame.jpg 19KB

miam-fruit2.jpg 13KB

ga.js 40KB

PHY2D.js 17KB

matrix4.js 11KB

共 115 条

<!DOCTYPE html> <html> <head> <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com/"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="HandheldFriendly" content="true"> <meta name="description" content="pure energy - HTML5 CANVAS BSP Tree Demo"> <meta name="keywords" content="canvas,3D,BSP,BSP Tree,Binary Space Partitioning"> <link rel="canonical" href="http://www.dhteumeuleu.com/pure-energy">  <link rel="shortcut icon" href="/favicon.ico"/> <title>pure energy - HTML5 3D BSP Tree Demo</title> <style> html { overflow: hidden; -ms-touch-action: none; -ms-content-zooming: none; } body { position: absolute; margin: 0; padding: 0; background: #D2D2D2; width: 100%; height: 100%; } #screen { position: absolute; width: 100%; height: 100%; cursor: pointer; } </style> <script src="../library/matrix4.js"></script> <script src="../library/ge1doot.js"></script> <script> /* =================================================== * ---- HTML5 CANVAS BSP Tree experiment ---- * script: Gerard Ferrandez - 03 March 2013 * ----------------------------------------------- * adapted from C++ BSP Tree Demo * Copyright (c)1994-97 Bretton Wade * ftp://ftp.sgi.com/other/bspfaq/ * ----------------------------------------------- * Javascript released under the MIT license * http://www.dhteumeuleu.com/LICENSE.html * =================================================== */ "use strict"; (function () { var scr, ctx, pointer, world, cx = 0, cy = 0, lx = 0, ly = 0, // classification type for plane comparisons HC_IN = -1, HC_ON = 0, HC_OUT = 1, HC_SPANNING = 2, INFINITY = 100000, EPSILON = 1 / 100000, transformation = [], inverse = [], viewing = [], eye = [], p0 = [], p1 = [], p2 = [], inverse = [].inverse, xsize, ysize, aspect, light, ambiantLight, outp, inp, frame = 2; //------------------------------------------------------------------------------ // construct polygon //------------------------------------------------------------------------------ var polygon = function (p, list, rgb, nosplit) { var points; if (list) { // indexed points points = []; for ( var i = 0; i < list.length; points.push( p[ list[i++] ] ) ); } else { // list of points points = p; } // color rgb = rgb || [1, 1, 1]; points.rgb = [ rgb[0], rgb[1], rgb[2], (rgb[3] === undefined) ? ambiantLight : rgb[3] ]; // plane points.plane = points.definePlane(); // no split flag points.nosplit = nosplit || false; return points; } //------------------------------------------------------------------------------ // Draw a polygon (transformed by the camera) [HOT] //------------------------------------------------------------------------------ var drawPolygon = function (poly) { // -------- step 1 : compute 3D transformation // loop over the polygons in the list for (var i = 0, l = poly.length; i < l; i++) { p0 = poly[i]; // if point is not already computed if (p0.frame !== frame) { // compute the viewing transformation p2 = p0.multiplyMatrix(viewing); // save frame id p0.frame = frame; // compute the screen location p0.x = (p2[0] / p2[3]) * aspect + xsize; p0.y = (p2[1] / p2[3]) * -aspect + ysize; } } // -------- step 2 : expand polygon and draw (avoid anti-alias gaps) - DON'T USE SLOW CANVAS stroke() ctx.beginPath(); var x, y, d; for (var i = 0; i < l; ++i) { // the point before p0 = poly[(i > 0) ? i - 1 : l - 1]; // this point p1 = poly[i]; // compute line vectors (assume CCW poly) y = p1.x - p0.x; x = -(p1.y - p0.y); // normal length (offset by 0.5 pixel) d = 1 / (2 * Math.sqrt(x * x + y * y)); // draw parallel lines ctx.lineTo( p0.x + x * d, p0.y + y * d ); ctx.lineTo( p1.x + x * d, p1.y + y * d ); } // fill polygon ctx.fill(); // debug // ctx.strokeStyle = "#000"; // ctx.stroke(); // } //------------------------------------------------------------------------------ // split the polygon with a plane3d //------------------------------------------------------------------------------ var split = function (poly, plane) { var outpts = [], inpts = [], out_c = 0, in_c = 0, // assume plane3d and polygon coincident for starters poly_class = HC_ON, // start with the last point ptA = poly[poly.length - 1], // classify it relative to the plane sideA = ptA.dotProduct(plane); // no split flag if (poly.nosplit) { outp = poly; return HC_OUT; } // loop on the points for (var i = 0; i < poly.length; i++) { // get the current point var ptB = poly[i], // classify it relative to the plane sideB = ptB.dotProduct(plane); // if the current point is on the positive side if (sideB > EPSILON) { // if the polygon classification is on if (poly_class == HC_ON) { // classify the polygon as out poly_class = HC_OUT; // else if the polygon classification is not out } else if (poly_class != HC_OUT) { // set the polygon classification to spanning poly_class = HC_SPANNING; } // if the previous point was on the opposite side of the plane if (sideA < -EPSILON) { // compute the vector between the points var v = ptB.subtract(ptA); // add the newly computed point to the partitions outpts[out_c++] = inpts[in_c++] = ptA.add( v.multiplyScalar( -ptA.dotProduct(plane) / v.dotProduct(plane) ) ); // set the poly_class appropriately poly_class = HC_SPANNING; } // add the current point3d to the positive partition outpts[out_c++] = ptB; // the current point is on the negative side } else if (sideB < -EPSILON) { // if the polygon classification is on if (poly_class == HC_ON) { // classify the polygon as in poly_class = HC_IN; // else if the polygon classification is not in } else if (poly_class != HC_IN) { // set the polygon classification to spanning poly_class = HC_SPANNING; } // if the previous point was on the opposite side of the plane if (sideA > EPSILON) { // compute the vector between the points var v = ptB.subtract(ptA); // add the newly computed point to the partitions outpts[out_c++] = inpts[in_c++] = ptA.add( v.multiplyScalar( -ptA.dotProduct(plane) / v.dotProduct(plane) ) ); // set the poly_class appropriately poly_class = HC_SPANNING; } // add the current point to the negative partition inpts[in_c++] = ptB; // the current point is on the plane } else { // add the current point to the partitions outpts[out_c++] = inpts[in_c++] = ptB; } // copy the current point to the last point ptA = ptB; // copy the current point's side information... sideA = sideB; } // perform the appropriate action based on the classification switch (poly_class) { // if the polygon is entirely positive case HC_OUT: // make the positive partition outp = poly; break; // if the polygon is entirely negative case HC_IN: // make the negative partition inp = poly; break; // if the polygon was plane case HC_SPANNING: // make the positive partition outp = polygon(outpts, false, poly.rgb); // make the negative partition inp = polygon(inpts, false, poly.rgb); break; } return poly_class; } //------------------------------------------------------------------------------ // generate volumes (all polygons assumed CCW !!!) //------------------------------------------------------------------------------ var volume = { cube : function (transform, rgb, nosplit)

评论收藏

内容反馈