清华博士接亲被要求现场写代码，5 分钟做出一颗爱心樱花3D相册(HTML+CSS+JavaScript)...

❉ 清华博士接亲被要求现场写代码，5 分钟做出一颗爱心3D相册(HTML+CSS+JavaScript)「可以拿去送给自己喜欢的人」

告白前, 我们的留言区开放给你！快来秀出你的别样表白方式，和你心仪的那个ta表白吧！

❉接亲剧情介绍

6月20日，被要求现场写代码冲上微博热搜，有网友直呼：以后接亲没点能力，怕是成功不了，不得不说，有才华的男生真帅！
近日在陕西西安，一位新郎接亲时，被新娘要求当场写代码编程。新郎忙得满头大汗，终于在5分钟内完成考验，在电脑上做出一颗红彤彤的爱心。
据新娘介绍，接亲的第一关是穿越火线，第二关是麋鹿套圈。新娘表示，最难的是让新郎写程序，由于自己不懂，觉得出的这两关考验很难，但她认为，新郎是清华大学计算机专业博士，相信他能完成，出题是想提醒他不要忘记吃饭的手艺
在看到新郎做出的爱心时，新娘大呼“放心了放心了”！
其实，这不是第一次程序员新郎在接亲时被要求写代码了。
据悉，在去年3月，江苏徐州一新郎在接亲时，伴娘为了活跃现场气氛，要求新郎当场写代码，向新娘表达爱意。
伴娘称大家是同事，想到两位新人都是程序员，要求新郎用这种方法表达爱意也是临时起意的。

❉ 文章目录

❉ 清华博士接亲被要求现场写代码，5 分钟做出一颗爱心3D相册(HTML+CSS+JavaScript)「可以拿去送给自己喜欢的人」
- ❉接亲剧情介绍
- ❉来自网友的神评论
❉ 不甘落后-制作一个爱心相册留着以后结婚用吧~
❉ 爱心3D相册效果演示
- 1. PC(电脑端)演示
- 2. H5(手机端)演示
❉ 代码文件目录
一、❉文字开场白修改(代码实现)
- html (开场白部分)
- js(开场白部分)
二、❉樱花雨3D相册(代码实现)
- html (3D相册部分)
- js 樱花飘落
三、❉樱花雨3D相册裁剪(教程)
- 1.相片裁剪(教程)
- 2.美图秀秀(电脑版)裁剪图片
四、❉歌曲mp3更换教程(教程)
五、❉前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
六、❉ 源码获取
七、❉更多表白源码

❉ 不甘落后-制作一个爱心相册留着以后结婚用吧~ ❉ 爱心3D相册效果演示

1.樱花雨3D相册演示地址2.文字开场白+浪漫樱花飘落演示地址

1. PC(电脑端)演示

2. H5(手机端)演示

❉ 代码文件目录

一、❉文字开场白修改(代码实现)

示例：找到js文件中的script.js文件,只需要修改文字就行

html (开场白部分)

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>❤文字开场白+3D樱花雨相册</title><style>body {position: fixed;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 0;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}</style></head><body><script src="js/underscore-min.js"></script><script src="./js/script.js"></script></body>
</html>

js(开场白部分)

/* 只需要修改这里的文字就行 */
let str = ["宝贝", "今天是我们相爱520天❤", "别眨眼哦~"];
let i = -1;
let time = setInterval(() => {if (i != str.length - 1) {i++;shape.print(str[i]);} else {// 清除定时器clearTimeout(time);// 跳转到oriental页面window.location.href = "oriental.html";// 重置为-1i = -1;}
}, 1500);

二、❉樱花雨3D相册(代码实现)

html (3D相册部分)

  <body><!--音乐部分  --><audio autoplay="autopaly"><source src="renxi.mp3" type="audio/mp3" /></audio><div id="jsi-cherry-container" class="container"><!-- 3D相册代码部分 --><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></div></body>

js 樱花飘落

   <script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function() {this.setParameters();this.reconstructMethods();this.createCherries();this.render();setParameters: function() {this.$container = $('#jsi-cherry-container');this.width = this.$container.width();this.height = this.$container.height();this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');this.cherries = [];this.maxAddingInterval = Math.round((this.MAX_ADDING_INTERVAL * 1000) / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function() {this.render = this.render.bind(this);},var CHERRY_BLOSSOM = function(renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};CHERRY_BLOSSOM.prototype = {FOCUS_POSITION: 300,FAR_LIMIT: 600,MAX_RIPPLE_COUNT: 100,RIPPLE_RADIUS: 100,SURFACE_RATE: 0.5,SINK_OFFSET: 20,init: function(isRandom) {this.x = this.getRandomValue(-this.renderer.width,this.renderer.width);var axis = this.getAxis(),theta =this.theta +(Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) *Math.PI) /500;theta %= Math.PI * 2;this.offsetY =40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);this.thresholdY =this.renderer.height / 2 +this.renderer.height * this.SURFACE_RATE * axis.rate;this.entityColor.addColorStop(0,'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(0.05,'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(1,'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');$(function() {RENDERER.init();});</script>

三、❉樱花雨3D相册裁剪(教程)

教程如下：需要12张图片, 1-6 图片是大图 400px400px ,01-06 图片是小图 100px100px

将准备好的图片,自行替换 img 文件中的图片即可!

1.相片裁剪(教程)

1.1首先:下载美图秀秀/百度下载/或者软件安装
1.2或者使用在线链接裁剪—> 在线裁剪图片链接

2.美图秀秀(电脑版)裁剪图片

2.1选择图片裁剪

四、❉歌曲mp3更换教程(教程)

如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
1.1搜索需要的歌曲

1.2下载
1.3获取歌曲id
1.4关注公众号以后/复制链接到浏览器打开

1.5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)

五、❉前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~

六、❉ 源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉ 1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉ 3.以上内容技术相关问题可以相互学习，可关注↓公众号获取更多源码 !

七、❉更多表白源码

❤100款表白源码演示地址