一、直接上效果
标签页：
页面内容：（谷歌浏览器可以打开）
二、其中的注意点
为了保证脚本传递到其他电脑也能显示，图片直接以链接的形式插入
-
最简单的本地图片转链接:
-
上传QQ相册
然后复制链接
三、完整脚本
以下脚本可以直接出 一、直接上效果 的效果
<html ondragstart="return false">
<head>
<!-- 设置页面 图标 & 标题 -->
<link rel="Shortcut Icon" href="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/.*HMIJaYkhzyqJADh1luBkz.CCzASAkxDw9AZqzwNGc!/r/dIQAAAAAAAAA" />
<meta charset="UTF-8">
<title>页面标签名字</title>
<style 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);
}
</style>
</head>
<body>
<div id="perspective">
<div id="wrap" >
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/VQVL.PlxJL*DX4oZKuaofe2y3ZkFvt*9ldw*Q6LWnKM!/r/dAQBAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/dA414*hoJzGBV7Phn42v7Y.IsbG3AQU2ky.J*8gkU2s!/r/dD4BAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/tFYlh5*X03TaJMZahUN5CT2Ly8IpAdKNBS3ab4RbE.4!/r/dL4AAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/81XcQoo1i5DDeYu3xRAqmt3pKEIn1Zs.9rp5AlkaHps!/r/dLYAAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/duObIo0lN2TfM9VTwa1EhMZHFndux1HAJlfs*QuCSX0!/r/dD4BAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" alt=""/>
<img class = "reflect" src="http://r.photo.store.qq.com/psb?/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="http://r.photo.store.qq.com/psb?/V11SX5hm1agePL/ew98jEGCPmgVo.eZYKH4dYOYxUoPawF3xZp1Ug9LBIo!/r/dIMAAAAAAAAA" />
</div>
<div id="div2">
<img class = "border_img" class = "cover" src="http://r.photo.store.qq.com/psb?/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("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;
}
四、申明
由于是娱乐，都是笔者
复制黏贴+百度修改的最终结果
仅供参考
3476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
