动态流星雨旋转相册，演示地址https://yangtao.love/photo/资源-CSDN文库

共40个文件

sample：12个

jpg：11个

head：4个

151 浏览量 2023-08-29 16:33:29 上传评论收藏 34.48MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

photo.rar （40个子文件）

photo

style.css 9KB

pm_2.mp3 4.55MB

.git

index 1KB

HEAD 23B

refs

heads

master 41B

tags

remotes

origin

HEAD 32B

objects

pack

pack-89dcab9aa39164d2dd80118214fce64e838b1c5c.idx 1KB

pack-89dcab9aa39164d2dd80118214fce64e838b1c5c.pack 5.16MB

info

description 73B

packed-refs 114B

info

exclude 240B

logs

HEAD 191B

refs

heads

master 191B

remotes

origin

HEAD 191B

hooks

post-update.sample 189B

prepare-commit-msg.sample 1KB

commit-msg.sample 896B

pre-receive.sample 544B

update.sample 4KB

pre-commit.sample 2KB

pre-rebase.sample 5KB

applypatch-msg.sample 478B

fsmonitor-watchman.sample 5KB

pre-applypatch.sample 424B

pre-push.sample 1KB

pre-merge-commit.sample 416B

config 308B

img

2.jpg 6.34MB

10.jpg 1.58MB

6.jpg 446KB

1.jpg 2.08MB

5.jpg 349KB

8.jpg 1.39MB

11.jpg 1.25MB

3.jpg 342KB

7.jpg 1.32MB

9.jpg 1.81MB

4.jpg 4.76MB

index.html 26KB

pm_1.mp3 3.29MB

<!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 { width: 100vw; height: 100vh; } body { display: flex; /* perspective: 1000px; */ transform-style: preserve-3d; /* background-image: url(./img/3.png); */ background: #0c0c0c; height: 100%; width: 100%; } #box { z-index: 9999; position: relative; display: flex; width: 130px; height: 200px; margin: auto; transform-style: preserve-3d; animation: roteY 50s linear infinite; } @keyframes roteY { 0% { transform: rotateX(-10deg) rotateY(0deg); } 10% { transform: rotateX(-10deg) rotateY(36deg); } 20% { transform: rotateX(-10deg) rotateY(72deg); } 30% { transform: rotateX(-10deg) rotateY(108deg); } 40% { transform: rotateX(-10deg) rotateY(144deg); } 50% { transform: rotateX(-10deg) rotateY(180deg); } 60% { transform: rotateX(-10deg) rotateY(216deg); } 70% { transform: rotateX(-10deg) rotateY(252deg); } 80% { transform: rotateX(-10deg) rotateY(288deg); } 90% { transform: rotateX(-10deg) rotateY(324deg); } 100% { transform: rotateX(-10deg) rotateY(360deg); } } #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, 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); } /* 下雨特效 */ #codepen-link { position: absolute; bottom: 30px; right: 30px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; box-sizing: border-box; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg"); background-position: center center; background-size: cover; opacity: 0.5; -webkit-transition: all 0.25s; transition: all 0.25s; } #codepen-link:hover { opacity: 0.8; box-shadow: 0 0 6px #efefef; } </style> </head> <body> <audio preload="auto" id="music" src="./pm_1.mp3" autoplay="autoplay"> </audio>  <div id="box"></div>  <div class="stars" id='stars'></div> <script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script> <script type="text/javascript"> // const AudioContext = window.AudioContext || window.webkitAudioContext; // const audioCtx = new AudioContext(); // function audioAutoPlay(url) { // let request = new XMLHttpRequest(); // request.open("GET", url, true); // request.responseType = "arraybuffer"; // request.onload = function() { // console.log('音频文件加载完成'); // audioCtx.decodeAudioData(request.response, function(buffer) { // console.log('对音频解码完成'); // var source = audioCtx.createBufferSource(); // source.buffer = buffer; // source.connect(audioCtx.destination); // source.start(); // }, // function(e) { console.log(e); }); // }; // request.send(); // } // audioAutoPlay("地址.mp3"); </script> <script> //生成相册 var obox = document.getElementById("box"); for(var i=0;i<10;i++){ var odiv = document.createElement('div') obox.appendChild(odiv) } //生成流星 var starbox = document.getElementById('stars'); for(var j=0;j<50;j++){ var stardv = document.createElement('div') stardv.setAttribute('class','star'); starbox.appendChild(stardv) } /* var musicIndex = 0; var musicList = ['pm_1.mp3','pm_2.mp3']; var music = document.getElementById("music"); music.addEventListener('ended', function(){ if(musicIndex === musicList.length-1){ musicIndex = 0; }else{ musicIndex = musicIndex+1; } this.src = musicList[musicIndex]; }, false) */ //封装函数让谷歌浏览器自动播放 function play() { var music = document.getElementById("music"); //判断如果音乐停止播放中，就让他播放。。。 if (music.paused) { music.paused = false; music.play(); }else{ } } setInterval(play(), 3); document.body.onclick = function(){ play() } setTimeout(init, 100); function init() { var obox = document.getElementById("box"); var aDiv = obox.children; 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;

评论收藏

内容反馈