H5动态云背景导航页源码资源-CSDN文库

共17个文件

png：10个

js：4个

html：2个

版权申诉

导航页源码

8 浏览量 2025-01-10 13:27:01 上传评论收藏 185KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

动态云背景导航页源码.zip （17个子文件）

beij

beij.html 43KB

img

Detector.js 2KB

RequestAnimationFrame.js 535B

cloud.png 26KB

logo.png 4KB

icon-2.png 18KB

puff.svg 1KB

lock_icon_copy.png 1KB

ThreeWebGL.js 137KB

icon-1.png 19KB

ThreeExtras.js 85KB

key.png 392B

tick.png 1023B

icon-4.png 9KB

user_icon_copy.png 1KB

icon-3.png 15KB

index.html 25KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title>导航</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; } .tp-content { width: 80%; max-width: 650px; background: rgba(0,0,0,.1); border-radius: 10px; box-shadow: -2px -2px 2px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255,255,255,0.1), 2px 2px 8px rgba(0,0,0,0.15); position: fixed; left: 50%; top: 25%; transform: translateX(-50%); padding: 15px; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; } .tp-content:hover { box-shadow:-2px -2px 4px rgba(255,255,255,1),-2px -2px 14px rgba(255,255,255,0.7),inset 2px 2px 6px rgba(255,255,255,0.3),2px 2px 10px rgba(0,0,0,0.25);} .tp-content a { display: block; width: 20%; background: rgba(0,68,255,0.1); color: #fff; font-size: 16px; line-height: 30px; text-align: center; text-decoration: none; margin: 15px 2%; border: 1px solid rgba(0,0,0,.4); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .tp-content a:hover { transition:all .3s; border-radius:0; border-color:rgba(0,0,0,.9); background:rgba(144,0,255,.4);} .tp-content a img { width:25px; height:25px; margin-right:6px; transform-origin:50% 0; animation:yaolingdang 3s infinite ease;} @media screen and (max-width:1200px) {.tp-content a {width:40%; margin:15px 5%;} * {margin:0;padding:0;} .tp-content {width:80%;max-width:650px;background:rgba(0,0,0,.1);border-radius:10px;box-shadow:-2px -2px 2px rgba(255,255,255,1),-2px -2px 12px rgba(255,255,255,0.5),inset 2px 2px 4px rgba(255,255,255,0.1),2px 2px 8px rgba(0,0,0,0.15);position:fixed;left:0;top:25%;right:0;margin:0 auto;padding:15px;box-sizing:border-box;display:flex;justify-content:center;flex-wrap:wrap;} .tp-content:hover {box-shadow:-2px -2px 4px rgba(255,255,255,1),-2px -2px 14px rgba(255,255,255,0.7),inset 2px 2px 6px rgba(255,255,255,0.3),2px 2px 10px rgba(0,0,0,0.25);} .tp-content a {display:block;width:20%;background:rgba(0,68,255,0.1);color:#fff;font-size:16px;line-height:30px;text-align:center;text-decoration:none;margin:15px 2%;border:1px solid rgba(0,0,0,.4);border-radius:8px;display:flex;align-items:center;justify-content:center;} .tp-content a:hover {transition:all .3s;border-radius:0;border-color:rgba(0,0,0,.9);background:rgba(144,0,255,.4);} .tp-content a img {width:25px;height:25px;margin-right:6px;transform-origin:50% 0;animation:yaolingdang 3s infinite ease;} @media screen and (max-width:1200px) {.tp-content a {width:40%;margin:15px 5%;} } @media screen and (max-width:980px) {.tp-content a {width:40%;} } @media screen and (max-width:650px) {.tp-content a {width:80%;} } .copyright {width:100%;position:fixed;bottom:0;width:100%;text-align:center;font-size:12px;color:#fff;line-height:20px;} @keyframes yaolingdang {5%,25%,45% {transform:rotate(8deg);} 0%,10%,30%,50% {transform:rotate(-8deg);} 15%,35%,55% {transform:rotate(4deg);} 20%,40%,60% {transform:rotate(-4deg);} 65%,100% {transform:rotate(0deg);} } </style> </head> </html> <script type="text/javascript" src="img/ThreeWebGL.js"></script> <script type="text/javascript" src="img/ThreeExtras.js"></script> <script type="text/javascript" src="img/Detector.js"></script> <script type="text/javascript" src="img/RequestAnimationFrame.js"></script> <script id="vs" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script id="fs" type="x-shader/x-fragment"> uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep(fogNear, fogFar, depth); gl_FragColor = texture2D(map, vUv); gl_FragColor.w *= pow(gl_FragCoord.z, 20.0); gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w), fogFactor); } </script> <script type="text/javascript"> if(!Detector.webgl) Detector.addGetWebGLMessage(); var canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = window.innerHeight; var context = canvas.getContext('2d'); var gradient = context.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, "#1e4877"); gradient.addColorStop(0.5, "#4584b4"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')'; var container; var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [], sprite, size, x, y, z; var mouseX = 0, mouseY = 0; var start_time = new Date().getTime(); var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000); camera.position.z = 6000; scene = new THREE.Scene(); geometry = new THREE.Geometry(); var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURQAAANje4Nbc3tfd3+rt7ufq7OTo6ufq7Ons7ujs7ff4+fn6+tfc3/7+/vj5+fb4+Pb3+Pr6+/////////////v7/P////////////n6+v////////7+/vLz9P39/f///////////////////9bc3vb4+PDy8/7///3+/u7w8f////////////7+//39/f7+//////T19tbb3tbc3vb4+P///+bp697j5f////n5+vDy8/P09e/x8u7x8vHy8////////+/x8ebq6////+Xo6u3v8PT29tbc3vf4+f///+rt7vL09e/x8vv8/Ozu7+3w8djd4P///+Lm6Pj5+f////////39/f39/dzh4////9HY2v39/dXb3v7//9fd3/n5+tjd4P///9fd3/X29////9fc3+vt7s7V2NXb3vP09f////n5+vP09ejs7ebp69Xb3ens7uLm6Nbc3tjd4OLm6Nfc39bc3tTa3ens7fDy8+ns7dnf4fb3+Njd4PP09d7i5fz8/P39/dne4eHl5+Xp6v39/t7j5dzg49je4OXo6tfd3/////7+/vr6+8/W2efq6/7+/t7j5d3h487V2Ozu79bc3tbc39vg4vf4+Pb3+Pv7/P///+fq7Ozv8Pb3+ODk5uPn6f////7+/t7i5PT19u7w8c7V2PX29/r6++bp6+fq7Ort7tfd3+/x8vX299bb3uHl5+nr7fP19dTa3fb3+O/x8vv7++Dk5v39/ePn6f///9Pa3Nne4dXb3vP19fP09dTa3ebq693i5M/V2P///9bc3tfc3+fq7Njd4Pv8/Nfd39/j5dTa3eLm6OXo6f7+/uns7dLY2/P09dbb3tLY293i5OTo6fT19s/V2MzT1+3v8PP09dvg4uHl5+Hl5tHX2uHl59bb3trf4t7j5dbc39bb3uvu7/Dy8+fp6+fq7Pn6+uTo6ufq7Ort7vb3+Njd4OPn6fb3+O7w8fb3+Nzh4+vu7+/x8uDk5uTo6u7x8vz9/fz9/fv8/Pf4+fn6+vX29+2SCnQAAAD9dFJOUwADDQsDBgcBAgQNEBDf+gsIE7DSz/TIwMUW1czj1ue5uL6qshMn5djvzJy1vOprd5P2GhYjerh+pxrG0eHB6sKu3L59xOgsIh6Xy8vR973YXm63ONuPYWZ6tuZLenNZL1WhY/qLL+PWHu2l69rXqH/DsTM9gkZphd+JyCvSUIKkWFNBpp1Fj/UlmDmAT0Hi3FyKn9zQdUuF1+Pu8aHwyq2Q9oTrt7DRr+WF1LnfqN6Q7PLyjMQ0M3Lc5Kzq4nCWjymK2cKHlZ6w9PrYmdbN+Dv3pZ7wm5XRqrrLTX1q9cKubM3n4rHEVbXq79t3kl50udyiQL3PeGM0SGzDzsvCcCtbAAAgAElEQVR42u19CUCVZfq9CNyFJdaQxWS54gYKKiq4BC4hmOOGqIwLolhmae6W5po6buSSSzlWDmWZVlYmGmVpmbaOU5mVWTrZmKVtVmpW0/+c53m/ey9WSjM685/5zQtcLojKOc951vf9vlujxv/W/9b/1v/W/9b/1v/W/9alWna8eX9pt//fg44nbtR+dv3O/w0GnDa/cwSgrNj/b9jfYQsJCQj1d57jA06Hxx3+qxlwhgYExmTFBAaGOqsA9cNyOBz/9Sqw+weE5SUXJ2dkhUEGDj8Lst3pbwu12Wx+9v92D/APCQjMysoKCwwICAn193c6/ewOO94dTjznV//lCkAECIzJy0jOixEKQkJDQ51OSN/P6c9l83f8lxOAEBAWk5Gcm5uRBxWEBYKFUEREiD9Uls2KDHYGhF8oD+y/+PQ/QvwiAHhATFZycXFxLsJAHnkICwgJtRacwh0GGRPxYRKklTf/0+sFPwggKyO3uLgCDCTvnTFjxqKyvMCwmDDQAIcAFU5TFiAp+DMwhoaKCixdeMWI/0Aa7A7iz8strigoqChOLl7Ss0VaWs+ZBWX9+8+pyII3BISGSEz0Cw0JCLCFIl8gYQT46d91IkzY4Bj/oRLg7+xnQwbIIHysioI5TTqWY7Vo0

评论收藏

内容反馈

版权申诉