娱乐_3D相册(HTML)_七夕基础

一、直接上效果 【娱乐_3D相册(HTML)_七夕】标签页：

文章图片

页面内容：（谷歌浏览器可以打开）

文章图片

二、其中的注意点为了保证脚本传递到其他电脑也能显示，图片直接以链接的形式插入

最简单的本地图片转链接:: 上传QQ相册
然后复制链接

文章图片

三、完整脚本以下脚本可以直接出 一、直接上效果 的效果

页面标签名字 - 锐客网 type="text/css"> *{margin:0; padding:0; } /*格式化页面*/ body{ /* 背景图片 */ background:url("http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA") repeat-x ; /*设置背景从左到右复制*/ /*filter:blur(5px); 将body 里的内容都虚化 background-size:cover; */ } #perspective{ perspective:1314px; /*场景景深*/ } #wrap{ position: relative; width:520px; height:520px; margin:100px auto 0; transform-style:preserve-3d; /*当前元素3D效果*/ transform: rotateX(-30deg) rotateY(0deg); } #wrap img{ position: absolute; width: 210px; /*315 420*/ height: 280px; margin: 25px; /*上右下左*/ border-radius: 15px; /* 圆角 */ cursor: pointer; transition: all 0.6s; } #wrap img:hover{ transform: scale(1.4); } .reflect { /*背景渐变效果*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); box-shadow:5px 0px 30px #FFF; /*右下像素（越大越虚）*/ } #wrap p{ /*底板*/ width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center,350px 350px,rgba(244,23,234,0.2),rgba(0,0,0,0)); position: absolute; top:100%; left:50%; margin-top: -600px; margin-left: -600px; border-radius: 600px; transform: rotateX(90deg); } #div1 img{ position: absolute; left: 0px; top: 0px; overflow: hidden; border-radius: 50%; box-shadow:5px 0px 30px #FFF /*0 0 30px 10px rgba(255,255,255,.7) inset; */ } #div2 img{ position: absolute; right: 0px; top: 0px; overflow: hidden; border-radius: 50%; box-shadow:5px 0px 30px #FFF /*0 0 30px 10px rgba(255,255,255,.7) inset; */ } .border_img{ position: absolute; width: 180px; height: 180px; display: block; margin-bottom: 20px; /* 鼠标接触放大 */ cursor: pointer; transition: all 0.6s; } .border_img:hover{ transform: scale(1.4); }
文章图片文章图片文章图片文章图片文章图片文章图片文章图片 type="text/javascript"> window.onload = function(){ var oWrap = document.getElementById('wrap'); var oImg = oWrap.getElementsByTagName('img'); var oImgLength = oImg.length; /* 获得照片数量 */ var Deg = 360 / oImgLength; var nowX , nowY , lastX , lastY , minusX = 0, minusY = 0; var roY = 0 , roX = -10; var timer; for ( var i = 0; i < oImgLength; i++ ) { oImg[i].style.transform = 'rotateY('+ i * Deg +'deg) translateZ(300px)'; /* 照片间的空间距离*/ oImg[i].style.transition = 'transform 1s '+ (oImgLength - 1 - i) * 0.1 +'s'; }mTop(); window.onresize = mTop; function mTop(){ var wH = document.documentElement.clientHeight; oWrap.style.marginTop = wH / 2 - 180 + 'px'; }// 拖拽：三个事件-按下移动抬起 //按下 document.onmousedown = function(ev){ ev = ev || window.event; //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错 lastX = ev.clientX; lastY = ev.clientY; //移动 this.onmousemove = function(ev){ ev = ev || window.event; clearInterval( timer ); nowX = ev.clientX; // clientX 鼠标距离页面左边的距离 nowY = ev.clientY; // clientY ………………………………顶部………………//当前坐标和前一点坐标差值 minusX = nowX - lastX; minusY = nowY - lastY; //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快 roY += minusX*0.2; // roY = roY + minusX*0.2; roX -= minusY*0.1; oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)'; //前一点的坐标 lastX = nowX; lastY = nowY; } //抬起 this.onmouseup = function(){ this.onmousemove = null; timer = setInterval(function(){ minusX *= 0.95; minusY *= 0.95; roY += minusX*0.2; // roY = roY + minusX*0.2; roX -= minusY*0.1; oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)'; if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 ) { clearInterval( timer ); } console.log( minusX ); },13); } return false; } } 文章图片文章图片

增加模糊背景class
由于直接在body上增加模糊会将整体都变模糊，所以采用class+伪元素方法设置

.bg_cover{ position: absolute; width:100%; height:100%; text-align: center; line-height: 300px; color: white; } .bg_cover::before{ content: ''; position: absolute; width:100%; height:100%; top:0; left:0; background:url("http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA") repeat-x 0; /*设置背景从左到右复制*/ filter:blur(2px); z-index: -1; background-size:auto; }

四、申明