❤表白神器❤(html5+CSS3)制作一个[流星3D旋转相册]送女朋友吧!

共13个文件

jpg：10个

mp3：1个

html：1个

vue.js

css3

html

jquery

需积分: 50 192 浏览量 2020-12-10 17:18:21 上传评论 3 收藏 5.15MB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

3D旋转木马相册.zip （13个子文件）

3D旋转木马相册

renxi.mp3 4.55MB

style.css 9KB

index.html 5KB

img

4.jpg 45KB

3.jpg 398KB

6.jpg 26KB

10.jpg 14KB

1.jpg 30KB

7.jpg 34KB

9.jpg 31KB

2.jpg 16KB

8.jpg 19KB

5.jpg 23KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D旋转相册</title> <link rel="stylesheet" href="style.css"> <style> *{margin: 0;padding: 0;} html,body{height: 100%;} body{ display: flex; perspective: 1000px; transform-style: preserve-3d; /* background-image: url(./img/3.png); */ height:100%; width: 100%; } #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 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> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio>  <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>  <div class="stars"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </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(img/"+(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>