❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！
❉ 文章目录
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备❉ 3D相册演示(含背景音乐)可自定义12张相片 1. PC(电脑端)演示 2. H5(手机端)演示 3. 相片球 4. 照片墙 5. 旋转相册 6. 排序相册❉ 代码文件目录一、3D相册(代码实现) html (3D相册部分)js (背景部分)css (3D相册部分)二、歌曲mp3更换教程(教程)三、做好的网页效果,如何通过发链接给别人看? 1.1 解决部署上线~> 部署上线工具(可永久免费使用) 1.1部署流程1.2 哇~ 部署成功四、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 五、❉ 源码获取 六、❉更多表白源码 ❉ 3D相册演示(含背景音乐)可自定义12张相片在线演示地址
1. PC(电脑端)演示
2. H5(手机端)演示
3. 相片球
4. 照片墙
5. 旋转相册
6. 排序相册
❉ 代码文件目录 一、3D相册(代码实现)html (3D相册部分)
<!--* @Author: your name* @Date: -06-11 11:16:48* @LastEditTime: -06-11 11:18:53* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \06\index.html--><!DOCTYPE html><html><head><meta charset="utf-8" /><meta /><metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><link type="text/css" rel="stylesheet" href="static/css/style.css" /><link type="text/css" rel="stylesheet" href="static/css/animate.min.css" /><linktype="text/css"rel="stylesheet"href="static/css/audioAutoPlay.css"/><script src="static/js/jquery.min.js"></script><script src="static/js/three.js"></script><script src="static/js/tween.min.js"></script><script src="static/js/trackballcontrols.js"></script><script src="static/js/css3drenderer.js"></script><title>xxx,我爱你</title></head><body><imgid="music_ico"onclick="clickMusic()"src="static/image/music_ico.png"alt=""/><audioid="audio"style="display: none"src="static/music/bg_music.mp3"preload="auto"loop="loop"></audio><div id="container"></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"><imgid="showImg"style="width: 50px; height: 65px"src="./static/picture/ava2.jpg"/><div class="info_mem"><div class="nickname">xxx</div><div class="id">身份：xxxxxxxxxxxxxx</div><div class="vote">性别：女</div></div></div><div class="intro">风筝有风，海豚有海，你还有我 ????</div></div></body><script type="text/javascript" src="static/js/functions.js"></script><script type="text/javascript" src="static/js/audioAutoPlay.js"></script></html>
js (背景部分)
<script>var personArray = new Array();var CurPersonNum = 0;// 模拟推送数据var s = setInterval(function () {// get animatevar 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/s1.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/s2.png",}// {// image: "img/c6.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 camera, scene, renderer;var controls;var objects = [];var targets = {table: [],sphere: [],helix: [],grid: [],};init();animate();function init() {camera = new THREE.PerspectiveCamera(40,window.innerWidth / window.innerHeight,1,10000);camera.position.z = 3000;scene = new THREE.Scene();for (var i = 0; i < objects.length; i++) {var object = new THREE.Object3D();object.position.x = (i % 5) * 400 - 800; // 400 图片的左右间距 800 x轴中心店object.position.y = -(Math.floor(i / 5) % 5) * 300 + 500; // 500 y轴中心店object.position.z = Math.floor(i / 25) * 200 - 800; // 300调整 片间距 800z轴中心店targets.grid.push(object);}var button = document.getElementById("grid");button.addEventListener("click",function (event) {transform(targets.grid, 2000);},false);transform(targets.table, 2000);window.addEventListener("resize", onWindowResize, false);}</script>
找到index.html中的 js 代码 可自定义添加多张图片
注意:保证图片在100-199张以下,不然会影响美观哦
for (var i = 0; i < 199; i++) {personArray.push({image: "img/s1.png",},//在这可以自定义添加相片{image: "img/c2.png",},{image: "img/c3.png",}...更多);}
css (3D相册部分)
.box {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;}.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;}二、歌曲mp3更换教程(教程)
如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
1.搜索需要的歌曲
2.下载
3获取歌曲id
4关注公众号以后/复制链接到浏览器打开
5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
三、做好的网页效果,如何通过发链接给别人看?
1.1 解决部署上线~> 部署上线工具(可永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
四、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
五、❉ 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
