女朋友生日如何浪漫送她一个3D音乐爱心相册

Posted MmM豆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了女朋友生日如何浪漫送她一个3D音乐爱心相册相关的知识,希望对你有一定的参考价值。

文章目录

前言

源码在文章末尾
作为一名程序员,当然要用程序员的方式啦。用代码去爱她,所以笔者思前想后,于是有了下列想法:

  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修改一下 默认启动地址 http://localhost:8083

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

二个插件,图床,里面提供了许多免费的图床,需要那个源自己选 然后把你老婆的照片放上去 有自己的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;
		

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

表白成功,记得来留言哦

项目地址

以上是关于女朋友生日如何浪漫送她一个3D音乐爱心相册的主要内容,如果未能解决你的问题,请参考以下文章

我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)

ESP 保姆级教程疯狂Node.js服务器篇 ——程序员的浪漫,给女朋友做个3d相册,实现公网访问(不需要ESP)

表白生日祝福和3D表白相册

520七夕情人节告白网页代码—浪漫3D相册

520七夕情人节告白网页代码—浪漫3D相册

爱她,就送她ifunk