想给女朋友做个网站，遇到技术问题真诚求建议！

[651794071]

本人是小白，女友快过生日了，想做个网站给她。对于前端只了解基本的 html 和 css…做简单的页面可能还要边查边写，想请教下大佬们，以下效果的实现是否涉及到比较进阶 /高级的前端技术，是否涉及到各种框架等？

1. 进入网站之后先是一张照片（背景）从模糊到清晰，接着中间有个密码框缓缓浮出（ 2s ）
2. 我会提前设置好正确的“密码”，输入前两次若错误，提示“错误”，第一次输入成功 /第三次输入后，出现一段旁白然后 5s 后自动跳转。（这个好像比较容易实现，看过一点点 JavaScript ）
3. 这里自动跳转我想实现一个掀开布的效果，类似于以前进 qq 空间的时候那种…掀开直接就是主页面，而不是跳转到另外一个页面去

另外，以上效果是否涉及到“动态”，因为之前想直接托管到 github 上面，但是后来发现 github 只能托管静态页面？所以是不是后端也要自己部署呢？

本来打算自己找个前端的小项目先跟一遍，但是由于时间原因，可能不太来得及。我尝试过自己查这些效果如何实现，但是发现效率不高，主要问题是不知道怎么“问”，类似的效果可能名字并不是这样叫，就导致某些想法不容易查到如何去实现。所以想听下各位的建议，如果不去系统学一遍前端的知识，是不是很难实现以上几种效果？非常感谢！

感谢各位老哥对于做网站送女朋友这个想法的建议...我明白网站只能看，我这个想法的目的不过也就和送实体照片册啊什么的差不多，一份小回忆呗，还有这个网站只是礼物的一部分 （终于找到在哪里写补充了）

的确不是所有人都喜欢网站，但是我觉得她会喜欢，毕竟我多少还算了解她的吧。而且我自认为很有创意，这本身也是见仁见智的问题。另外，她对物质方面（口红，包包等）追求不是特别大，而且这些在我看来平常都能送的- -只要花钱就能送了呗。上面提到的效果都是铺垫，我是想在网站主页面设计一个书信版，目前想的是 365 个，因为之后女票要去留学一年（我们都还是本科生），这个想法是让她一天看一页我给她写的东西。调侃归调侃，还是希望大家能给点技术方面的建议！谢谢！！

最后一次补充

首先感谢评论区还是有朋友对我的想法的鼓励，感谢@SilentDepth 为我的每条想实现的效果都给出了建议。

还是看到好多人在说送包，送口红什么的，可能是上面两条补充没有看到吧。我只能说我更加了解我的女朋友，大家对于女性收礼物的“刻板印象”可能真的不适用于我的女票。无意炫耀，虽然我是学生，但经济能力方面，送包送口红什么的我还是可以送得起的，也不会舍不得送，可我也从来没说过礼物只是一个网站，谢谢大家为我“送礼物”这件事情操心，我来这里也只是想寻求一下技术方面的帮助，希望大家调侃的同时能给些技术建议呗。

看到评论区有个老哥说到点子上了，“想必阁下必然有啥特别的”，的确，我有些保留的想法没有说出来，这些都是不需要技术实现的东西。

[musi]

不怕各位 v2er 笑话，我前几天还接了个做表白网页的单，那个人域名都舍不得买😂

[pizalo]

啊这，留学那不是得异地了？

[mostkia]

还不如送包零食福袋、买支口红、买个包包比较靠谱，这种东西其实一点也不浪漫，除了能看，没有任何用处。当然你女朋友之前处的时候就喜欢这类东西，那可以的。普通的女孩子肯定不关心这种东西。

[shaojz2005]

想要这种效果，做个视频也不错的

[IMCA1024]

曾经我做过，但没什么用。

[vanleon]

@PaPaTree 对象过生日的时候，我就是这么干的，完全超出预期，哈哈哈

[Believer]

不是所有女生都吃口红包包那一套的，楼主这样真心的挺好。

[guolaopi]

要不送她个化妆品管理系统吧，淘宝买个源码一搭就行（滑稽
大部分程序员的技能方向是做管理、工具类的程序，
好看那玩意儿得有设计头脑在里面

[Lefi]

@vanleon 这破东西还不如松下

[XiaoBaiYa]

做过一次,泼个冷水,这无非是自我感动罢了.真不如楼上说的做个视频,随便一个 AE 模板套点照片.一定比你做个网站要感动

[fengmumu]

顶一下。另外可以网上找点骚骚的那种动效，改改就能拉过来用 看着也不 错

[shenxgan]

没人推荐这个吗 https://www.html5tricks.com/html5-heart-animation.html 🤣

[fakenews]

写个礼物抽奖网站不就得了，又能满足现实需要，以后过完生日还能搭其他的东西，相册博客之类的，如果能坚持很久还能整个十周年礼物展览呢（逃

[kemikemian]

话说你女朋友没上过网吗？
要不去微博买个热搜
正常去买个创意相册把你们俩照片放进去，网页真没啥创意

[daozhihun]

这个。。。我读书的时候写过一个 EXE 作为生日礼物给女生，虽然说对方也很开心，但是说实话实物更开心。。。这个 EXE 她没多久就忘了，但送的东西十几年了她都留着

[cnuser002]

你朋友生日还有多久？三周开外我觉得还是很有希望的，毕竟你有 HTML JS CSS 基础，基本功能实现很容易。一些难的效果你用 Google 找类似的改就行了。

一条一条说吧，首先你要用 Github 的静态 web 页面托管，这个是完全可以的。它指的静态不是说你的页面不能跳转不能有动的成分，而是指你的文件是提前写死上传上去的，满足这个条件，你网站写的多骚都没关系。
比如下面这个，
https://yui540.graphics/
这个就是一个纯静态网站，里面的效果应该够你用了吧，这用 React 做的。

言归正传，你这个需求，包涵三个方面，
1. 模拟登陆。
2. 页面跳转。
3. 要有动态效果

第一个需求很简单就能实现，说白了你不用真的登录，在 script 里写好密码跟记录登录次数的变量，然后给你的登录按钮那里套上一个点击事件，在里面加逻辑就可以。

第二个需求页面跳转，我不清楚你到底要什么，简单的页面跳转很容易，但是如果你是要在同页面里换内容，这个就不止是跳转的问题，会麻烦不少。但也有可能你根本就不需要跳转页面，比如你可以把登录框放在页面的前面，盖住内容部分，登录完把登录框隐藏了，内容自然就出来了。

第三个是对你挑战最大的。你要让页面有动态效果，得将 CSS 跟 Javascript 结合起来。CSS3 里有很多很多效果，现在也加入了动画相关内容，而 JS 作为脚本可以设计出一些动态效果，有些比较难的效果单靠 CSS 撑不起来，得用 JS 串联起来。
不过讲道理这些都属于艺术创作的部分了，主要是抄起来难。

最后别人送什么礼物，轮不到我们指手画脚吧。

[651794071]

@cnuser002 感动哭了！好人！！超级感谢你的帮助！！

[ctt]

其实初心还是一个浪漫的，唯美的，饱含心意的礼物，这比什么都珍贵。二十年前的年轻人要表示心意，应该不会把口红或一块五花肉作为首选。可见消费主义把普通人驯化得很成功了。

[blackmirror]

还真有这种送网站的，送钱实际点

[cyberpoint]

还不如送按摩棒