三维网格空间舞台效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } html, body { overflow: hidden; background: #000; padding: 0px; margin: 0px; } .aon { position: absolute; top: 0px; left: 0px; z-index: 1001; } .aon a { position: relative; display: inline-block; outline: none; margin: 0 0px; padding: 15px 10px; color: #fff; text-decoration: none; font-family: Cinzel; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); font-size: 1em; } .aon a:focus::before, .aon a:hover::before { height: 6px; } .aon a:hover::before, .aon a:hover::after, .aon a:focus::before, .aon a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .aon a:hover span:last-child, .aon a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); } .aon a span { color: #fff !important; } .aon a span:first-child { z-index: 2; display: block; font-weight: 300; } .aon a span:last-child { z-index: 1; display: block; padding: 8px 0 0 0; color: rgba(0, 0, 0, 0.4); text-shadow: none; text-transform: none; font-style: italic; font-size: 1.2em; font-family: Cinzel Decorative; font-weight: 600; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .aon a::before, .aon a::after { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #fff; content: ''; opacity: 0.2; -webkit-transition: opacity 0.3s, height 0.3s; -moz-transition: opacity 0.3s, height 0.3s; transition: opacity 0.3s, height 0.3s; } .aon a::after { top: 100%; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .aon a:hover { outline: none; } </style> </head> <body translate="no"> <script id="vertSun" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } </script> <script id="fragSun" type="x-shader/x-fragment"> uniform vec3 color1; uniform vec3 color2; varying vec2 vUv; void main() { gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0); } </script> <script id="fragPlane" type="x-shader/x-fragment"> uniform vec3 color1; uniform vec3 color2; varying vec2 vUv; void main() { gl_FragColor = vec4(mix(color1, color2, vUv.x), 1.0); } </script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script> <script > !function(t){var o=t.noise={};function r(t,o,r){this.x=t,this.y=o,this.z=r}r.prototype.dot2=function(t,o){return this.x*t+this.y*o},r.prototype.dot3=function(t,o,r){return this.x*t+this.y*o+this.z*r};var n=[new r(1,1,0),new r(-1,1,0),new r(1,-1,0),new r(-1,-1,0),new r(1,0,1),new r(-1,0,1),new r(1,0,-1),new r(-1,0,-1),new r(0,1,1),new r(0,-1,1),new r(0,1,-1),new r(0,-1,-1)],e=[151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180],a=new Array(512),i=new Array(512);o.seed=function(t){t>0&&t<1&&(t*=65536),(t=Math.floor(t))<256&&(t|=t<<8);for(var o=0;o<256;o++){var r;r=1&o?e[o]^255&t:e[o]^t>>8&255,a[o]=a[o+256]=r,i[o]=i[o+256]=n[r%12]}},o.seed(0);var d=.5*(Math.sqrt(3)-1),f=(3-Math.sqrt(3))/6,h=1/6;function u(t){return t*t*t*(t*(6*t-15)+1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0