本文总共4249个字,阅读需15分钟,全文加载时间:2.675s,本站综合其他专栏收录该内容! 字体大小:

文章导读:自己制作好看的炫酷的3D桌面背景,复制替换即可。 可用鼠标任意调整角度 1.首先创建一个.html文件,再复制文章结尾的代码进去。 2.创建images文件夹存放图片,如图: 3.放入自己需要的照片进去,修改照片名……各位看官请向下阅读:

自己制作好看的炫酷的3D桌面背景,复制替换即可。

可用鼠标任意调整角度

1.首先创建一个.html文件,再复制文章结尾的代码进去。

2.创建images文件夹存放图片,如图:

3.放入自己需要的照片进去,修改照片名称或者修改代码里面的图片名称一一对应,可添加一个或者多个。少了多增加一个<img src='images/11.jpg' width='133' height='200' alt='#'>,多了删除。

4.调整width 或者 heigh可以调整宽度和高度,src 是图片路径(要能找到图片哦)。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<style>

*{margin:0;padding:0}

body{

background:#222;

overflow:hidden;

user-select:none; /*禁止选中*/

}

.perspective{

perspective:800px; /*3d景深*/

}

.wrap{

transform-style:preserve-3d;

width:120px;

height:180px;

margin:100px auto;

position:relative;

transform:rotateX(-10deg) rotateY(0deg);

}

.wrap img{

display:block;

position:absolute;

width:100%;

height:100%;

transform: rotateY(0deg) translateZ(0px);

padding:10px;

background:transparent;

box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 扩散程度 颜色*/

border-radius:5px; /*圆角*/

-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直径*/

}

.wrap p{

width:1200px;

height:1200px;

background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));

position:absolute;

border-radius:50%;

left:50%;

top:100%;

margin-left:-600px;

margin-top:-600px;

transform:rotateX(90deg); /*沿着x轴方向摁倒*/

}

</style>

<title>3d场景照片墙</title>

</head>

<body>

<div class='perspective'>

<div class='wrap'>

<img src='images/1.jpg' width='133' height='200' alt='#'>

<img src='images/2.jpg' width='133' height='200' alt='#'>

<img src='images/3.jpg' width='133' height='200' alt='#'>

<img src='images/4.jpg' width='133' height='200' alt='#'>

<img src='images/5.jpg' width='133' height='200' alt='#'>

<img src='images/6.jpg' width='133' height='200' alt='#'>

<img src='images/7.jpg' width='133' height='200' alt='#'>

<img src='images/8.jpg' width='133' height='200' alt='#'>

<img src='images/9.jpg' width='133' height='200' alt='#'>

<img src='images/10.jpg' width='133' height='200' alt='#'>

<img src='images/11.jpg' width='133' height='200' alt='#'>

<p></p>

</div>

</div>

<script>

/*谁 触发了什么事件 谁做了什么*/

window.onload=function(){ /*页面加载完成*/

/*最新的原生获取元素方法querySelectorAll*/

var oImg=document.querySelectorAll('img');

var oWrap=document.querySelector('.wrap');

var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;

var timer=null;

/*计算每一个图片的角度 总角度(360) / 数量(11) = 单位角度*/

var length=oImg.length; /*获取img的数量 统称为长度*/

var Deg=360/length; /*单位角度*/

for(var i=0;i<length;i++){

oImg[i].style.transform='rotateY('+ i*Deg +'deg) translateZ(350px)';

oImg[i].style.transition='transform 1s '+(length-1-i)*0.2+'s'

}

mTop();

window.onresize=mTop;

function mTop(){

/*获取浏览器窗口可视高度*/

var wH=document.documentElement.clientHeight||document.body.clientHeight;

oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+'px';

}

/*拖拽drag 按下 onmousedown 移动 onmousemove 抬起 onmouseup */

document.onmousedown=function(event){ /*按下鼠标开始准备拖拽*/

event=event||window.event; /*处理兼容性*/

lastX=event.clientX; /*鼠标拖拽开始时的x坐标*/

lastY=event.clientY; /*鼠标拖拽开始时的Y坐标*/

clearInterval(timer);

document.onmousemove=function(event){

event=event||window.event;

nowX=event.clientX; /*鼠标移动时的x坐标*/

nowY=event.clientY; /*鼠标移动时的y坐标*/

minusX=nowX-lastX; /*获取鼠标移动距离*/

minusY=nowY-lastY; /*获取鼠标移动距离*/

roY+=minusX*0.2; /*通过移动量计算旋转角度*/

roX-=minusY*0.1; /*通过移动量计算旋转角度*/

oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)'

lastX=nowX; /*更新初始位置保证 lastX 跟得上鼠标*/

lastY=nowY; /*更新初始位置保证 lastY */

}

document.onmouseup=function(){

document.onmousemove=null;

timer=setInterval(function(){

/*给一个摩擦系数,每一次定时器触发都慢一点点*/

minusX*=0.9;

minusY*=0.9;

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);

}

},13);

}

return false;

}

}

</script>

</body>

</html>

以上内容由优质教程资源合作伙伴 “鲸鱼办公” 整理编辑,如果对您有帮助欢迎转发分享!

你可能对这些文章感兴趣:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注