520不会表白？教你制作神器3D音乐爱心相册

前言

马上就是520了，作为一名程序员，当然要用程序员的方式啦。用代码去爱她，所以笔者思前想后，于是有了下列想法：

1. 要花里胡哨，看了惊呼我的天，色彩要绚丽

2. 要打动人心，肯定要酷炫，所以要动才有特色

3. 好的东西肯定要有美丽的音乐来加分

   兄弟们看完记得点个赞，让更多看见，造福广大单身的程序员，谁说我们是直男，我们也很浪漫，

   话不多说，上才艺

   （项目地址在最后，代码太多只展示部分，用于修改的代码）

一、来个花里胡哨的背景

我本来想找个流星的动图，不太理想，于是就使用了这个css库

css-doodle 这个库可以让你很轻松的实现，一些漂亮的图案，

不会用？不慌，作为资深的cv工程师，我们看案例 作者大大，在

codePen 流下了许多炫酷的效果，下面是我选择的

//css   css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: (    :doodle { @grid: 50x1 / 50vmin; perspective: 23vmin; } background: @multi(@r(200, 240), ( radial-gradient(       @p(#51eaea, #fffde1, #ff9d76, #FB3569) 15%,    /*这里修改配色，p代表随机  */       transparent 50%     ) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat   )); @size: 80%; @place-cell: center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 20s linear infinite; animation-delay: calc(@i() * -.4s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } } ) } 

<script src='/dist/lib/css-doodle.min.js'></script> //需要去下载一下    <css-doodle use="var(--rule)"> </css-doodle> 

这样我们就轻轻松松的完成第一步

二、酷炫的照片，让我们动起来

我想要的效果，是先散乱然后，变成一张爱心照片墙， 自己写不符合我cv工程师的身份，这里我们用three.js，然后我看看案例里面刚好有个我需要的，这很nice 效果

但是和我想要的还是有一定的差距，第一不是爱心，这赶脚就差了一个味道，第二就是不能点击放大单张图片，同时，我需要适配一下手机的景深，和移动的位置，达到手机电脑两不误 ，于是我改了改代码修改效果 如下：

代码太多就不展示全了，就大概展示一下可以调整的地方，就不用去深读three.js

 var table = [ "http://yanxuan.nosdn.127.net/1857b3da325e69adf575f4f7dc1f9a09.jpg", "Ruthenium", "101.07", 3, 1, // 这个数据就是你图片的定位，只需关注，图片地址，和3,1剩下是我懒得删除了，删了还要修改下面的循环哦 //3代表列，1是代表行 你可以想象成一个九宫格那种，图案需要排列成什么形状就需要你自己去，计算啦 //代码也很简单，其他地方没啥修改的，我都调试的差不多了，代码很清晰，大家自己查看，下我github上的代码即可 

三、来个背景音乐，让气氛渲染起来

这里我们运用原生的audio标签，但是谷歌禁止了自动播放，所以换一个浏览器即可，要解决这个可以去使用AudioContext，但我的需求没那么固执，所以这里使用常规的自动播放即可但是发现ios的又不能自动播放，但我可以在微信中来解决这个问题毕竟大部分都是微信给你女友呀

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> function autoPlayAudio() {         wx.config({ // 配置信息, 即使不正确也能使用 wx.ready             debug: false,             appId: '',             timestamp: 1,             nonceStr: '',             signature: '',             jsApiList: [] });         wx.ready(function() { var globalAudio=document.getElementById("bgMusic");             globalAudio.play(); }); }; // 解决ios音乐不自动播放的问题 autoPlayAudio(); 

四、解决上线

买服务器？花都省了，这个肯定也省了，这里给大家推荐一个程序员必备软件，uTools 谁用谁知道

里面集成了许多好用的插件，当然需要自己安装，不会的用的，百度一下你就知道哦

安装内网穿透插件

这样就只需要在本地启动一个服务器，就能让全世界看到你的页面啦

本地，笔者简单用node写了个服务，所以不慌 只需要照着图 写，请求地址，就自己写自己的了，如果端口占用了

就去app.js修改一下

但是你连接却发现，异常缓慢，当然很影响体验了，这是你图片在本地的锅，我们这时用到这个神器第

二个插件，图床，里面提供了许多免费的图床，需要那个源自己选 然后把你老婆的照片放上去 有自己的oss就用自己的

上传后你就能拥有一个线上地址，然后音乐如何线上？当然是找网易啦，

"http://music.163.com/song/media/outer/url?id=436514312.mp3 

去网易云音乐网页版找个音乐打开，记得是单曲，然后把url后面的id取下来替换一下上面的就好，我用的是成都这首歌

到这里，就完成一个华丽的相册了，

如果你还想加一些你想说的话，可以在html中继续添加 这个我们加到代码需要的自行添加即可

 <marquee id="affiche"  align="top" behavior="alternate" height="600" color="#FF0000"   hspace="100" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >   这是一个完整的例子   </marquee>  添加css 修改一下颜色  marquee{    color:#fff;    font-size: 22px;    position: absolute; } 

完成上面所有后，把内网穿透后的地址，微信给你女友

表白成功，记得来留言哦，

项目地址