娱乐
一、直接上效果
标签页：
页面内容：（谷歌浏览器可以打开）
二、其中的注意点
为了保证脚本传递到其他电脑也能显示，图片直接以链接的形式插入
- 最简单的本地图片转链接:
- 上传QQ相册
然后复制链接
三、完整脚本
以下脚本可以直接出 一、直接上效果 的效果
<html ondragstart="return false"><head><!-- 设置页面 图标 & 标题 --><link rel="Shortcut Icon" href="?/V11SX5hm1agePL/.*HMIJaYkhzyqJADh1luBkz.CCzASAkxDw9AZqzwNGc!/r/dIQAAAAAAAAA" /> <meta charset="UTF-8"> <title>页面标签名字</title><style type="text/css">*{margin:0;padding:0;} /*格式化页面*/body{ /* 背景图片 */background:url("?/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);}</style></head><body><div id="perspective"><div id="wrap" ><img class = "reflect" src="?/V11SX5hm1agePL/VQVL.PlxJL*DX4oZKuaofe2y3ZkFvt*9ldw*Q6LWnKM!/r/dAQBAAAAAAAA" alt=""/> <img class = "reflect" src="?/V11SX5hm1agePL/dA414*hoJzGBV7Phn42v7Y.IsbG3AQU2ky.J*8gkU2s!/r/dD4BAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/81XcQoo1i5DDeYu3xRAqmt3pKEIn1Zs.9rp5AlkaHps!/r/dLYAAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/duObIo0lN2TfM9VTwa1EhMZHFndux1HAJlfs*QuCSX0!/r/dD4BAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/Z*CDekdFF.9YjtL2Ahh7WkrSFecpFyCEKvGYQVWGReg!/r/dLgAAAAAAAAA" alt=""/><p></P></div><div><script 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;}}</script></div><div id="div1"><img class = "border_img" class = "cover" src="?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" /> </div><div id="div2"><img class = "border_img" class = "cover" src="?/V11SX5hm1agePL/Z*CDekdFF.9YjtL2Ahh7WkrSFecpFyCEKvGYQVWGReg!/r/dLgAAAAAAAAA" /></div></body>
</html>
增加模糊背景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("?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA") repeat-x 0; /*设置背景 从左到右复制*/filter:blur(2px);z-index: -1;background-size:auto;}
四、申明
由于是娱乐，都是笔者
复制黏贴+百度修改的最终结果
仅供参考
娱乐
一、直接上效果
标签页：
页面内容：（谷歌浏览器可以打开）
二、其中的注意点
为了保证脚本传递到其他电脑也能显示，图片直接以链接的形式插入
- 最简单的本地图片转链接:
- 上传QQ相册
然后复制链接
三、完整脚本
以下脚本可以直接出 一、直接上效果 的效果
<html ondragstart="return false"><head><!-- 设置页面 图标 & 标题 --><link rel="Shortcut Icon" href="?/V11SX5hm1agePL/.*HMIJaYkhzyqJADh1luBkz.CCzASAkxDw9AZqzwNGc!/r/dIQAAAAAAAAA" /> <meta charset="UTF-8"> <title>页面标签名字</title><style type="text/css">*{margin:0;padding:0;} /*格式化页面*/body{ /* 背景图片 */background:url("?/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);}</style></head><body><div id="perspective"><div id="wrap" ><img class = "reflect" src="?/V11SX5hm1agePL/VQVL.PlxJL*DX4oZKuaofe2y3ZkFvt*9ldw*Q6LWnKM!/r/dAQBAAAAAAAA" alt=""/> <img class = "reflect" src="?/V11SX5hm1agePL/dA414*hoJzGBV7Phn42v7Y.IsbG3AQU2ky.J*8gkU2s!/r/dD4BAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/81XcQoo1i5DDeYu3xRAqmt3pKEIn1Zs.9rp5AlkaHps!/r/dLYAAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/duObIo0lN2TfM9VTwa1EhMZHFndux1HAJlfs*QuCSX0!/r/dD4BAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" alt=""/><img class = "reflect" src="?/V11SX5hm1agePL/Z*CDekdFF.9YjtL2Ahh7WkrSFecpFyCEKvGYQVWGReg!/r/dLgAAAAAAAAA" alt=""/><p></P></div><div><script 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;}}</script></div><div id="div1"><img class = "border_img" class = "cover" src="?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" /> </div><div id="div2"><img class = "border_img" class = "cover" src="?/V11SX5hm1agePL/Z*CDekdFF.9YjtL2Ahh7WkrSFecpFyCEKvGYQVWGReg!/r/dLgAAAAAAAAA" /></div></body>
</html>
增加模糊背景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("?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA") repeat-x 0; /*设置背景 从左到右复制*/filter:blur(2px);z-index: -1;background-size:auto;}
四、申明
由于是娱乐，都是笔者
复制黏贴+百度修改的最终结果
仅供参考