520不会表白？教你制作神器3D音乐爱心相册
前言
马上就是520了，作为一名程序员，当然要用程序员的方式啦。用代码去爱她，所以笔者思前想后，于是有了下列想法：
-
要花里胡哨，看了惊呼我的天，色彩要绚丽
-
要打动人心，肯定要酷炫，所以要动才有特色
-
好的东西肯定要有美丽的音乐来加分
兄弟们看完记得点个赞，让更多看见，造福广大单身的程序员，谁说我们是直男，我们也很浪漫，
话不多说，上才艺
（项目地址在最后，代码太多只展示部分，用于修改的代码）
一、来个花里胡哨的背景
我本来想找个流星的动图，不太理想，于是就使用了这个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;
}
完成上面所有后，把内网穿透后的地址，微信给你女友
表白成功，记得来留言哦，
