网站首页 > 技术文章正文

炫酷的背景桌面制作，替换图片即可

hmc789 2024-11-18 13:01:31 技术文章 2 ℃

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

可用鼠标任意调整角度

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

2.创建images文件夹存放图片，如图：

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

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

<!doctype html>

<head>

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

<p></p>

</div>

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

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>

上一篇： CSS面试题:CSS 动画实现方式以及它们之间的区别
下一篇： CSS属性值函数(1)概述及语法

网站首页 > 技术文章 正文

炫酷的背景桌面制作，替换图片即可

猜你喜欢

网站首页 > 技术文章正文