【免费】情人节浪漫3D照片墙源码_html表白代码照片墙资源-CSDN文库

共10个文件

js：6个

png：2个

html：1个

需积分: 0 121 浏览量更新于2023-06-27 收藏 557KB ZIP 举报

HTML 3D照片墙是一种创新的方式，可以用来送给女朋友一个特殊的礼物。表格照片墙、球状照片墙、螺旋照片墙和格子照片墙等布局形式，可以将你们的美好回忆以独特而有趣的方式展示出来。通过这个特别的照片墙，你可以向女朋友展示你们共同的珍贵时刻，并给予她一个温馨而浪漫的惊喜。无论是纪念日、生日还是其他特殊场合，这个定制的HTML 3D照片墙会成为一份深深打动她心的礼物。免费下载，免费下载，免费下载

收起资源包目录

3d照片墙.zip （10个子文件）

3d照片墙

three.js 1020KB

three.min.js 499KB

CSS3DRenderer.js 7KB

tween.min.js 5KB

jquery.min.js 82KB

TrackballControls.js 14KB

img

c.png 9KB

a.png 166KB

css

animate.min.css 55KB

index.html 17KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <title>照片墙</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> html, body { height: 100%; } body { background-color: #000000; margin: 0; font-family: Helvetica, sans-serif;; overflow: hidden; } a { color: #ffffff; } #info { position: absolute; width: 100%; color: #ffffff; padding: 5px; font-family: Monospace; font-size: 13px; font-weight: bold; text-align: center; z-index: 1; } #menu { position: absolute; bottom: 20px; width: 100%; text-align: center; } .element { width: 100px;/* 120 160 */ height: 100px; box-shadow: 0px 0px 12px rgba(0,255,255,0.5); border: 1px solid rgba(127,255,255,0.25); text-align: center; cursor: default; } .element:hover { box-shadow: 0px 0px 12px rgba(0,255,255,0.75); border: 1px solid rgba(127,255,255,0.75); } .element img{ width:100px; height:100px; } .element .number { position: absolute; top: 20px; right: 20px; font-size: 12px; color: rgba(127,255,255,0.75); } .element .symbol { position: absolute; top: 40px; left: 0px; right: 0px; font-size: 60px; font-weight: bold; color: rgba(255,255,255,0.75); text-shadow: 0 0 10px rgba(0,255,255,0.95); } .element .details { position: absolute; bottom: 15px; left: 0px; right: 0px; font-size: 12px; color: rgba(127,255,255,0.75); } button { color: rgba(127,255,255,0.75); background: transparent; outline: 1px solid rgba(127,255,255,0.75); border: 0px; padding: 5px 10px; cursor: pointer; } button:hover { background-color: rgba(0,255,255,0.5); } button:active { color: #000000; background-color: rgba(0,255,255,0.75); } .show_info{position:fixed;background-color:rgba(0,0,0,.6);padding:10px;width:300px;margin:0 auto;left: 0;right:0;border-radius: 5px;box-shadow: 0 0 10px 0 #fff;top:30%;} .show_info img{display:block;margin:auto;border-radius: 5px;box-shadow: 0 0 10px 0 #888;} .show_info .intro{color:#fff;text-indent:20px;margin-top:10px;height:65px;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} .show_info .info_my{text-align: center;} .show_info .info_my > *{display:inline-block !important;vertical-align: middle;} .show_info .info_my .info_mem{color:#fff;max-width:120px;} .show_info .info_my .info_mem > div{text-align: left;} .show_info .info_my .info_mem > div.nickname{max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} </style> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <script src="js/jquery.min.js"></script> <script src="js/three.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/CSS3DRenderer.js"></script> <div id="container"></div> <audio autoplay="" loop=""><source src="http://www.ytmp3.cn/down/72794.mp3"></audio> <div id="info">3D签到墙</div> <div id="menu"> <button id="table">表格</button> <button id="sphere">球球</button> <button id="helix">螺旋</button> <button id="grid">格子</button> </div> <div class="show_info animated" style="display:none;"> <div class="info_my"> <img src="img/c.png" /> <div class="info_mem"> <div class="nickname">姓名：刘威</div> <div class="id">ID:男朋友</div> <div class="vote">性别：男</div> </div> </div> <div class="intro">别问我什么星座，我只为你量身定做。</div> </div> <script> var personArray = new Array; var CurPersonNum = 0; // animate var _in = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight']; var _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight']; // 模拟推送数据 var s = setInterval(function(){ // get animate var rand_in = parseInt(Math.random() * _in.length,10); var rand_out = parseInt(Math.random() * _out.length,10); if(CurPersonNum >= personArray.length){ CurPersonNum = 0; } $('.show_info').show(); $('.show_info').addClass(_in[rand_in]); setTimeout(function(){ $('.show_info').removeClass(_in[rand_in]); // 更改展示的图片 var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0]; img.setAttribute('src','img/a.png'); ++CurPersonNum; setTimeout(function(){ $('.show_info').addClass(_out[rand_out]); setTimeout(function(){ $('.show_info').removeClass(_out[rand_out]); $('.show_info').hide(); },1000); },1500); },1000); },4500); // 生成虚拟数据 for(var i=0;i<199;i++){ personArray.push({ image: "img/a.png" }); } var table = new Array; for (var i = 0; i < personArray.length; i++) { table[i] = new Object(); if (i < personArray.length) { table[i] = personArray[i]; table[i].src = personArray[i].thumb_image; } table[i].p_x = i % 20 + 1; table[i].p_y = Math.floor(i / 20) + 1; } /*var table = [ "H", "Hydrogen", "1.00794", 1, 1, "He", "Helium", "4.002602", 18, 1, "Li", "Lithium", "6.941", 1, 2, "Be", "Beryllium", "9.012182", 2, 2, "B", "Boron", "10.811", 13, 2, "C", "Carbon", "12.0107", 14, 2, "N", "Nitrogen", "14.0067", 15, 2, "O", "Oxygen", "15.9994", 16, 2, "F", "Fluorine", "18.9984032", 17, 2, "Ne", "Neon", "20.1797", 18, 2, "Na", "Sodium", "22.98976...", 1, 3, "Mg", "Magnesium", "24.305", 2, 3, "Al", "Aluminium", "26.9815386", 13, 3, "Si", "Silicon", "28.0855", 14, 3, "P", "Phosphorus", "30.973762", 15, 3, "S", "Sulfur", "32.065", 16, 3, "Cl", "Chlorine", "35.453", 17, 3, "Ar", "Argon", "39.948", 18, 3, "K", "Potassium", "39.948", 1, 4, "Ca", "Calcium", "40.078", 2, 4, "Sc", "Scandium", "44.955912", 3, 4, "Ti", "Titanium", "47.867", 4, 4, "V", "Vanadium", "50.9415", 5, 4, "Cr", "Chromium", "51.9961", 6, 4, "Mn", "Manganese", "54.938045", 7, 4, "Fe", "Iron", "55.845", 8, 4, "Co", "Cobalt", "58.933195", 9, 4, "Ni", "Nickel", "58.6934", 10, 4, "Cu", "Copper", "63.546", 11, 4, "Zn", "Zinc", "65.38", 12, 4, "Ga", "Gallium", "69.723", 13, 4, "Ge", "Germanium", "72.63", 14, 4, "As", "Arsenic", "74.9216", 15, 4, "Se", "Selenium", "78.96", 16, 4, "Br", "Bromine", "79.904", 17, 4, "Kr", "Krypton", "83.798", 18, 4, "Rb", "Rubidium", "85.4678", 1, 5, "Sr", "Strontium", "87.62", 2, 5, "Y", "Yttrium", "88.90585", 3, 5, "Zr", "Zirconium", "91.224", 4, 5, "Nb", "Niobium", "92.90628", 5, 5, "Mo", "Molybdenum", "95.96", 6, 5, "Tc", "Technetium", "(98)", 7, 5, "Ru", "Ruthenium", "101.07", 8, 5, "Rh", "Rhodium", "102.9055", 9, 5, "Pd", "Palladium"