效果图
步骤
1.需要在文件跟目录下新建img文件夹，添加对应图片；
2.新建index.html,复制下面代码
<html> <head> <meta charset="utf-8"> <title>旋转相册</title> <style> body { width: 100%; margin: 0; overflow: hidden; background: hsla(0, 5%, 5%, 1); background-repeat: no-repeat; background-attachment: fixed; background-image: linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1)); background-image: -moz-linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1)); } *,html,body{ margin: 0; padding: 0; width: 100%; height: 100%; } .page{ width: 100%; height: 100%; overflow: hidden; position: relative; /* background: radial-gradient(circle farthest-side at left top, #60aeff, #4b6ae9) */ } .content{ width: 200px; height: 200px; margin: 360px auto; transform-style: preserve-3d; transform: rotateY(20deg); animation:rotate 5s infinite; animation-timing-function: linear; } .content>div{ width: 200px; height: 200px; position:absolute; border: 1px solid #ccc; } .content>.inDiv{ width: 100px; height: 100px; top: 50px; left: 50px; } .content .front{ transform: translateZ(200px); } .content .back{ transform: translateZ(-200px); } .content .top{ transform: rotateX(90deg) translateZ(200px); } .content .bottom{ transform: rotateX(-90deg) translateZ(200px); } .content .left{ transform: rotateY(90deg) translateZ(200px); } .content .right{ transform: rotateY(-90deg) translateZ(200px); } .content .inFront{ transform: translateZ(50px); } .content .inBack{ transform: translateZ(-50px); } .content .inTop{ transform: rotateX(90deg) translateZ(50px); } .content .inBottom{ transform: rotateX(-90deg) translateZ(50px); } .content .inLeft{ transform: rotateY(90deg) translateZ(50px); } .content .inRight{ transform: rotateY(-90deg) translateZ(50px); } @keyframes rotate{ from{transform: rotateX(0deg) rotateY(0deg);} to{transform: rotateX(360deg) rotateY(360deg);} } </style> </head> <body> <canvas id="canv"></canvas> <div class="page"> <div class="content"> <div class="top"> <img src="./img/2.png" alt=""> </div> <div class="bottom"> <img src="./img/1-1.jpg" alt=""> </div> <div class="left"> <img src="./img/6.png" alt=""> </div> <div class="right"> <img src="./img/3.jpg" alt=""> </div> <div class="front"> <img src="./img/4.jpg" alt=""> </div> <div class="back"> <img src="./img/5.jpg" alt=""> </div> <div class="inTop inDiv"> <img src="./img/6.jpg" alt=""> </div> <div class="inBottom inDiv"> <img src="./img/5-1.jpg" alt=""> </div> <div class="inLeft inDiv"> <img src="./img/2-png.jpg" alt=""> </div> <div class="inRight inDiv"> <img src="./img/3-1.jpg" alt=""> </div> <div class="inFront inDiv"> <img src="./img/4-1.jpg" alt=""> </div> <div class="inBack inDiv"> <img src="./img/5-1.jpg" alt=""> </div> </div> </div> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById('canv'); var $ = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var _w = w * 0.5; var _h = h * 0.5; var arr = []; var cnt = 0; window.addEventListener('load', resize); window.addEventListener('resize', resize, false); function resize() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; c.style.position = 'absolute'; c.style.left = (window.innerWidth - w) * .01 + 'px'; c.style.top = (window.innerHeight - h) * .01 + 'px'; } function anim() { cnt++; if (cnt % 6) draw(); window.requestAnimFrame(anim); } anim(); function draw() { var splot = { x: rng(_w - 900, _w + 900), y: rng(_h - 900, _h + 900), r: rng(20, 80), spX: rng(-1, 1), spY: rng(-1, 1) }; arr.push(splot); while (arr.length > 100) { arr.shift(); } $.clearRect(0, 0, w, h); for (var i = 0; i < arr.length; i++) { splot = arr[i];; $.fillStyle = rndCol(); $.beginPath(); $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true); $.shadowBlur = 80; $.shadowOffsetX = 2; $.shadowOffsetY = 2; $.shadowColor = rndCol(); $.globalCompositeOperation = 'lighter'; $.fill(); splot.x = splot.x + splot.spX; splot.y = splot.y + splot.spY; splot.r = splot.r * 0.96; } } function rndCol() { var r = Math.floor(Math.random() * 180); var g = Math.floor(Math.random() * 60); var b = Math.floor(Math.random() * 100); return "rgb(" + r + "," + g + "," + b + ")"; } function rng(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </script> </body> </html>
3.运行