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

[651794071]

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

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

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

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

[ji39]

过十个生日你就做一个网站吗？

[Neillou]

@Raynard 正解. 话说万一以后要是分了. 还有个纪 (把) 念 (柄), 这就不太好了.

[chengxiao]

想起了 15 年前的我........后果很悲剧.....

[lietoumai]

是不是你想做个网站。。

[maskerTUI]

别做网站，送点其它的实物都好过做网站。

[651794071]

@lietoumai 哈哈哈哈哈是的

[stimw]

看这帖子有种回到 2008 年的感觉。

[651794071]

@Neillou 那...要是这样想，啥都不送可能比较好- -

[SilentDepth]

不涉及高级的 HTML/JS 知识，但对 CSS 有一定要求。

1. 照片从模糊到清晰的效果，filter 或 backdrop-filter 就可以做到（后者效果更好实现但不支持 IE/FF ）。
2. 确实不难，旁白如果是音频的话注意提前加载就好（避免即时加载出现尴尬的安静）。
3. 不清楚「掀开布」是什么效果，但如果涉及形状变形（而不是简单的平移），动画实现较复杂。

以上所有涉及平移的都用 transform，所有涉及透明度的都用 opacity，所有涉及过渡（从一个状态平滑变化到另一个状态）的都用 transition 。不涉及动态内容，极端地说一个 HTML 文件就解决了。

不过，楼上几个朋友也说了，如果可能，做这么个网页不如陪女朋友逛个街（

[651794071]

@SilentDepth 非常感谢！！！！！“掀开布”我是想把主页面当成桌子，前面那个输入密码的页面当成桌布，输入正确之后，“桌布”就从一角被掀开。 再次感谢您的建议！

[yueshang1]

口红 项链 包 哪个不香？

[lg106]

建议不要做网站，这个方法我十几年前用过

[qq525266]

哥，做网站真的不创意，这种数字和虚无缥缈的东西，帮你问了一圈，周围女生没有喜欢的，还不如买个相册实在一点，实在不行你做个视频放大播也行啊

[siknet]

听哥一句劝，买只迪奥 /汤姆福特口红就一两百，好过你做个淘宝给她

[azoon]

哈哈，很多技术男 10 年前干过这个蠢事。女生才不喜欢网站。。。

[hwcj123]

想必阁下必然有啥特别的。做网站还不如做相册了。我一条 dog 来凑啥热闹。。。

[ryansvn]

不是打击楼主，这种做法，不如送个化妆品首饰啥的有效，这行为，典型的兔子送胡萝卜给猫。

[POPOEVER]

唉……

[keaideren]

会成为女票：男友送过什么奇怪的生日礼物？的答案

[BigBunny]

你是来炫耀的吧。。哈哈