js实现假的三维云朵鼠标交互效果代码
代码语言:html
所属分类:其他
代码描述:js实现假的三维云朵鼠标交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #viewport { position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; perspective: 1000px; background-image: linear-gradient(bottom, #4584b4 28%, #1f4778 64%); background-image: -o-linear-gradient(bottom, #4584b4 28%, #1f4778 64%); background-image: -moz-linear-gradient(bottom, #4584b4 28%, #1f4778 64%); background-image: -webkit-linear-gradient(bottom, #4584b4 28%, #1f4778 64%); background-image: -ms-linear-gradient(bottom, #4584b4 28%, #1f4778 64%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.28, #4584b4), color-stop(0.64, #1f4778)); } #world { position: absolute; height: 512px; width: 512px; top: 50%; left: 50%; margin-left: -256px; margin-top: -256px; transform-style: preserve-3d; } #world div { transform-style: preserve-3d; } .cloudBase { position: absolute; height: 20px; width: 20px; top: 256px; left: 256px; margin-top: -10px; margin-left: -10px; } .cloudLayer { position: absolute; height: 256px; width: 256px; top: 50%; left: 50%; margin-top: -128px; margin-left: -128px; transition: opacity 0.5s ease-out; } </style> </head> <body> <div id="viewport"> <div id="world"></div> </div> <script> (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelRequestAnimationFrame = window[vendors[x] + 'cancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () {callback(currTime + timeToCall);}, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (id) { clearTimeout(id); }; } })(); /* Defining our variables world and viewport are DOM elements, worldXAngle and worldYAngle are floats that hold the world rotations, d is an int that defines the distance of the world from the camera */ var world = document.getElementById('world'), viewport = document.getElementById('viewport'), worldXAngle = 0, worldYAngle = 0, d = 0; /* objects is an array of clouds bases layers is an array of clouds layers */ var objects = [], layers = []; generate(); /* Creates a single cloud base: a div in world that is translated randomly into world space. Each axis goes from -256 to 256 pixels. */ function createCloud() { var div = document.createElement('div'); div.className = 'cloudBase'; var random_x = 256 - Math.random() * 512; var random_y = 256 - Math.random() * 512; var random_z = 256 - Math.random() * 512; var t = 'translateX(' + random_x + 'px) \ translateY(' + random_y + 'px) \ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0