基于HTML的3D立方体相册
代码下载地址：https://download.csdn.net/download/qq_44273429/13996508
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=div, initial-scale=1.0"> <title>love</title> <link rel="stylesheet" href="./css/program.css"> </head> <body> <div class="title"> 立方体旋转 </div> <audio controls="controls" autoplay="autoplay"><source src="./video/love.mp3" type="audio/mpeg"/> Your browser does not support the audio element. </audio> <div class="cube"> <!-- 外层立方体 --> <div class="outer-cube"> <div class="outer-top"> <img src="images/1.jpg"/> </div> <div class="outer-bottom"> <img src="images/2.jpg"/> </div> <div class="outer-front"> <img src="images/3.jpg"/> </div> <div class="outer-back"> <img src="images/4.jpg"/> </div> <div class="outer-left"> <img src="images/5.jpg"/> </div> <div class="outer-right"> <img src="images/6.jpg"/> </div> </div> <!-- 内层立方体 --> <div class="inner-cube"> <div class="inner-top"> <img src="images/01.jpg"/> </div> <div class="inner-bottom"> <img src="images/02.jpg"/> </div> <div class="inner-front"> <img src="images/03.jpg"/> </div> <div class="inner-back"> <img src="images/04.jpg"/> </div> <div class="inner-left"> <img src="images/05.jpg"/> </div> <div class="inner-right"> <img src="images/06.jpg"/> </div> </div> </div> <div> <div class="message"> <div class="author"> <a href="https://blog.csdn.net/qq_44273429">海拥制作</a> </div> <div class="tip"> 温馨提示：鼠标移入移出立方体，将会显示效果！ </div> </div> </div> </body> </html>
CSS代码
* { margin: 0px; padding: 0px; } html { overflow: hidden; height: 100%; background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%); } .title { color: rgb(255, 0, 200); text-align: center; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font-size: 40px; } .cube { position: relative; margin: 0px auto; margin-top: 9%; margin-left: 42%; width: 200px; height: 200px; transform: rotateX(-30deg) rotateY(-80deg); transform-style: preserve-3d; animation: rotate 15s infinite; } .cube .outer-cube, .cube .inner-cube { transform-style: preserve-3d; } /* 旋转立方体 */ @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } /* 外层立方体样式 */ .outer-cube .outer-top, .outer-cube .outer-bottom, .outer-cube .outer-right, .outer-cube .outer-left, .outer-cube .outer-front, .outer-cube .outer-back { position: absolute; top: 0; left: 0; width: 200px; height: 200px; border: 1px solid #fff; opacity: 0.3; transition: all .9s; } .outer-cube img { width: 200px; height: 200px; } .outer-top { transform: rotateX(90deg) translateZ(100px); } .outer-bottom { transform: rotateX(-90deg) translateZ(100px); } .outer-front { transform: rotateY(0deg) translateZ(100px); } .outer-back { transform: translateZ(-100px) rotateY(180deg); } .outer-left { transform: rotateY(90deg) translateZ(100px); } .outer-right { transform: rotateY(-90deg) translateZ(100px); } /* 嵌套的内层立方体样式 */ .inner-cube>div { position: absolute; top: 35px; left: 35px; width: 130px; height: 130px; } .inner-cube img { width: 130px; height: 130px; } .inner-top { transform: rotateX(90deg) translateZ(65px); } .inner-bottom { transform: rotateX(-90deg) translateZ(65px); } .inner-front { transform: rotateY(0deg) translateZ(65px); } .inner-back { transform: translateZ(-65px) rotateY(180deg); } .inner-left { transform: rotateY(90deg) translateZ(65px); } .inner-right { transform: rotateY(-90deg) translateZ(65px); } .cube:hover .outer-top { right: -70px; bottom: -70px; opacity: 0.8; transform: rotateX(90deg) translateZ(200px); } .cube:hover .outer-bottom { right: -70px; bottom: -70px; opacity: 0.8; transform: rotateX(-90deg) translateZ(200px); } .cube:hover .outer-front { right: -70px; bottom: -70px; opacity: 0.8; transform: rotateY(0deg) translateZ(200px); } .cube:hover .outer-back { right: -70px; bottom: -70px; opacity: 0.8; transform: translateZ(-200px) rotateY(180deg); } .cube:hover .outer-left { right: -70px; bottom: -70px; opacity: 0.8; transform: rotateY(90deg) translateZ(200px); } .cube:hover .outer-right { right: -70px; bottom: -70px; opacity: 0.8; transform: rotateY(-90deg) translateZ(200px); } .message .author { position: absolute; right: 50px; background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); font-size: 35px; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } .message .tip { position: absolute; right: 0px; margin-top: 60px; color: red; font-size: 18px; }
