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;
		}

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

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

项目地址