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

[651794071]

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

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

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

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

[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]

还不如送按摩棒