Skip to content

XBSDS/birthday-code-2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

大致说明

这是一个基于 HTML、CSS 和 JavaScript 制作的动态生日祝福网页。你可以用它来为朋友、家人或爱人送上一份特别的数字化生日惊喜! 本人并非学习计算机及其有关专业,只是单纯地对这些东西比较感兴趣,从而慢慢探索出来的。代码部分主要还是靠gemini AI来实现的,同时也从B站上爬了两个UP主开心患者light易燃的小兰的视频,放到了开头和结尾,来进一步提升观感(不得不吐槽B站的画质压缩太厉害了,导致很多视频都很糊)

1.简要效果

1.1第一幕

内嵌了一个《疯狂动物城》的视频,配乐是Try everything。选择这个视频,主要是感觉生日时候应当给予些磅礴向上的力量,节奏应该要比较昂扬向上。同时还增加了梦幻气泡上浮的效果,第一行姓名祝你生日快乐后续均可修改,整体登录框是毛玻璃效果。点击点击进入即可开启下一页面。 image

1.2第二幕

背景是一张雪树林的图片,该幕主要是呈现一个动态粒子的效果。配乐是Happy Birthdayimage

1.3第三幕

背景比较梦幻,是一个渐变色背景。该幕主要是实现一个蛋糕的效果,点击继续旅程即可开启下一页面。音乐会延续上一个页面的Happy Birthdayimage

1.4第四幕

背景刚开始是一个冷色调的窗户图片,中间是一个复古风蓝色的信封(至于为什么做成这样,因为我要送给的那个女生比较喜欢这类信封😁)配乐是生日歌的纯钢琴。 点击点击开启即可进入信封的内容部分(该代码所呈现的文字仅作示例,不涉及我写给那个女生的具体内容)。内容部分的背景图片做了从中间到四周逐渐变暗的效果,从而让字体看起来不费眼,更清晰。配乐是月球下的人(据我所知,那个女生挺喜欢这首歌的,就放在这最重要的内容部分)。文字内容会以打字的形式逐渐呈现出来,可以通过滚轮上下翻阅,全部呈现完之后就可以点击继续旅程开启下一页面。 image image

1.5第五幕

背景是一个偏向暖色调的渐变梦幻色彩,这一幕主要是呈现出一个贺卡的效果,可以写一些简短的话语与祝福。点击点击拆开礼物后,会出现一个相片飘落的效果。音乐部分会接着上一页面的月球下的人进行播放,经过大概10多秒会自动跳转到下一页面,同时对音乐做了一个逐渐消失的处理,可能不会显得那么突兀。 image

1.6第六幕

这一幕也是我最喜欢的一幕:星空背景、流星划落、烟花绽放。最终会勾勒出XX,生日快乐的字样。点击继续旅程会跳转到最后一个页面。 image

1.7第七幕

这是最后一幕,背景是月夜图片,放上了关于《白日梦想家》的一个视频,该视频可以全屏播放,跟正常播放设置的差不多,基本三四个按钮都有,感觉放在最后能再次给人一种对于美好明天的期待感,同时也在不经意暗示”这一天的生日快过去了“,明天又是未知的一天,但请一定不要把自己束缚住,敢于打破局限,为自己的生活增添彩色! image

2.文件分布大致概述

index.html文件是开头登录文件; css文件夹里均存放着css文件 ; html文件夹里均存放着html文件; js文件夹里均存放着js文件; img文件夹里存放着所有的背景图片和修饰图片; music文件夹里存放着所需的背景音乐; video文件夹里存放着开头登录界面内嵌的视频和结尾内嵌的视频; 字体文件夹里存放着好看的字体文件。

image

3.代码简要说明和修改建议

3.1第一幕修改

html文件夹中的登录.html文件中,图中标红框的可以去修改文字内容; imageindex.html文件中,修改图中标红框的部分可以修改开头的内嵌视频。 image

3.2第二幕修改

html文件夹中的index1.html中,红色标框处可以修改成自己喜欢的音乐; image 同文件下,这一行可以修改背景图片; imagejs文件夹中的indexl.js中,红色标框处可以修改想要的动态粒子文字(如果文字增多了几幕或者减少了几幕后,记得相应地修改720这个倒计时数字,方便文字播放完之后自动切换到下一幕,中间尽可能保证无空缺,否则影响观感)。 image

3.3第三幕修改

html文件夹下的生日蛋糕.html中,如果第二幕修改了音乐,记得跟第二幕的音乐保持一致,这样衔接比较顺畅. image

3.4第四幕修改

html文件夹下的信封.html文件下,此处可以修改信封第一屏的背景音乐、以及信封上的祝福语和提示语; imagejs文件夹下的信封.js文件下,下面那处可以修改信封内容部分的背景音乐,上面红色框包含的部分定义了在内容中插入图片的方式(内容中要插入图片的部分使用~这个符号,要跟函数内部定义的图片的顺序保持一致); image 同文件下,此处可以修改信封的内容(内容要用 ‘ ’ 包含住):< 这个符号表示结束时换行、+ 这个符号表示上下文字连接、^ 这个符号表示该段内容右对齐; imagecss文件夹下的信封.css文件中,此处可以修改信封第一屏的背景图片。 image 同文件夹下,此处可以修改信封内容部分的背景图片。 image

3.5第五幕修改

html文件夹下的贺卡.html文件中,此处可以修改背景音乐(最好与上一幕信封内容部分的音乐同步修改,衔接更好)、贺卡的内容、至于生日贺卡.jpg也可以修改(记得把图片放在同文件夹下); image 同文件下,如果想要修改飘落的图片可以首先把所有想放进去的图片全部放入到img文件夹下,并且命名为流图1流图2等等(一定要是jpg文件)。 image

3.6第六幕修改

html文件夹下的彩蛋原版.html中,此处可以修改动态粒子的文字显示部分,也可以修改字体样式,还可以修改右下角的文字内容image 同文件夹下,此处可以修改背景音乐image

3.7第七幕修改

html文件夹下的结尾.html中,此处可以修文字内容结尾视频image

About

从第一版的生日代码发布以来,我后续每每想起都花些时间去琢磨、去思考,看怎样把生日代码变得更完善、更丰富、更好看。于是经过一个多月的时间,尤其2025年12月5日这一天,应该从中午在教室坐到了凌晨,终于改出了大致的框架结构,后续几经修改、润色部分代码、感觉还可以,与诸位分享。其中开头和结尾的视频是从B站的UP主那里下载过来的,中间的信封部分第二幕借鉴了B站的另一位UP主,向他们表达感谢,同时也向gemini3.0致谢(毕竟本人只是一个小白)。其实改这版代码的初衷是为了给一个很有好感的女生准备生日礼物(自然具体的内容、图片和共同经历已经去除完全),于是改的比较匆忙,如果诸位有更好的建议可以提出,共同讨论,共同进步。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors