【免费】旋转跳跃，表白图片；旋转跳跃，表白图片资源-CSDN文库

共13个文件

jpg：12个

html：1个

需积分: 0 115 浏览量 2024-05-08 08:04:57 上传评论收藏 2.11MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

表白相册.zip （13个子文件）

表白相册

images

2.jpg 147KB

10.jpg 178KB

6.jpg 210KB

1.jpg 152KB

12.jpg 172KB

5.jpg 201KB

8.jpg 156KB

11.jpg 180KB

3.jpg 192KB

7.jpg 235KB

9.jpg 169KB

4.jpg 162KB

520表白.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>520相册</title> <style> *{margin: 0;padding: 0;} html,body{height: 100%;} body{ overflow: hidden; display: flex; background: #000; perspective: 1000px; transform-style: preserve-3d; } #box{ position: relative; display: flex; width: 130px; height: 200px; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg); } #box > div{ transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; box-shadow:0 0 10px #fff; -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%); } /* #box > div:nth-child(1){ background: skyblue; transform: translate3d(0,0,300px) rotateY(45deg); } #box > div:nth-child(2){ background: pink; transform: rotateY(0deg); } #box > div:nth-child(3){ background: purple; transform: translate3d(0,0,300px) rotateY(-45deg); } */ #box p{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0)); border-radius: 50%; transform: rotateX(90deg) translate3d(-600px,0,-105px); } </style> </head> <body> <div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p></p> </div> <script> setTimeout(init,100); function init(){ var obox = document.getElementById('box'), aDiv = obox.getElementsByTagName('div'); for (var i = 0; i < aDiv.length; i++) { aDiv[i].style.background = "url(images/"+(i+1)+".jpg) center/cover"; aDiv[i].style.transform = "rotateY("+(i*36)+"deg) translate3d(0,0,350px)"; aDiv[i].style.transition = "transform 1s "+(aDiv.length-i)*0.2+"s"; } var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 10, index = 0;//滚轮初始值 document.onmousedown = function(e){ clearInterval(obox.timer); e = e || window.event; var sX = e.clientX, sY = e.clientY; this.onmousemove = function(e){ e = e || window.event; var nX = e.clientX, nY = e.clientY; // 当前点的坐标和前一点的坐标差值 desX = nX - sX; desY = nY - sY; tX += desX*0.1; tY += desY*0.1; obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)"; sX = nX; sY = nY; } this.onmouseup = function(){ this.onmousemove = this.onmouseup = null; obox.timer = setInterval(function(){ desX *= 0.95; desY *= 0.95; tX += desX*0.1; tY += desY*0.1; obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)"; if (Math.abs(desX)<0.5 && Math.abs(desY)<0.5) { clearInterval(obox.timer); } },13); } return false; } //滚轮放大缩小 mousewheel(document,function(e){ e = e || window.event; var d = e.wheelDelta/120 || -e.detail/3; if (d>0) { index-=20; }else{ index+=30; } (index<(-1050)&&(index=(-1050))); document.body.style.perspective = 1000 + index + "px"; }) function mousewheel(obj,fn){ document.onmousewheel===null?obj.onmousewheel=fn:addEvent(obj,"DOMMouseScroll",fn) } function addEvent(obj,eName,fn){ obj.attachEvent?obj.attachEvent("on"+eName,fn):obj.addEventListener(eName,fn); } } </script> </body> </html>

评论收藏

内容反馈