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

[651794071]

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

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

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

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

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

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

最后一次补充

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

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

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

[maichael]

没有任何“动态”，github 上找找相关的效果开源库套上就行了，什么框架都不用。

[WEBUG]

建议就是不要做网站

[putaozhenhaochi]

直男啊。

[zooo]

还真有做网站送女友的？ 我以为之前大家推荐都是反话了。。

我感觉女生对网站并不感兴趣吧

[amanbolatbalabek]

不如请她吃顿饭。。。
网站能做什么？只能看

[corningsun]

建议不要做网站+1
要弄清楚你女朋友到底喜欢什么才是真的，清空购物车效果可能更好。

[Perry]

过生日这么晚重要的节日千万别用网站敷衍，踏踏实实搞点你女朋友真正想要的。

[aabbcc112233]

投其所好 比较重要。

[651794071]

补充一下...其实实习这些效果是我为了让网站好看些，关键在主页里面的内容嘛当然是，打算写些东西给她。然后网站只是礼物的一部分咯。

[yeqizhang]

本人技术支持，仅收费 99.9 哈哈

[Track13]

对你来说可能花了几天才弄出来，实际她觉得这网站不太行很敷衍。(虽然我觉得也不太行)

[baiduyixia]

还不如给她买个 lv 的包包

[651794071]

@yeqizhang 我觉得可以，如果可以收费咨询能学一波东西做点东西出来也挺好

[651794071]

感谢各位老哥对于做网站送女朋友这个想法的建议...我明白网站只能看，我这个想法的目的不过也就和送实体照片册啊什么的差不多，一份小回忆呗，还有这个网站只是礼物的一部分- - 话说 v 站可以直接在主题部分补充 /编辑主题内容吗

[ayase252]

前面那么一大串，做到一个页面里就好了嘛（假定你女朋友不会用 F12 的话）。要做的话看看 CSS transition, transform, animation 。（一般会最后发现自己设计力不够

[Raynard]

。。。这不是加分项，这是减分项

[berserk]

不如买包+1

[651794071]

@ayase252 谢谢！我可以她肯定不会想到去查网页源码的嘿嘿

[Weixiao0725]

@baiduyixia 我认为 ma 的包包更好一些。

[vanleon]

你可以先事前问你的女朋友，生日当天送她一个这款颜色的口红，问她喜欢吗？



生日当天再送她一个这个，你觉得惊不惊喜意不意外？



https://detail.tmall.com/item.htm?id=564891421863&skuId=3784557659825

[piqq]

女朋友会喜欢网站吗？

[alw]

做网站送女友 是 IT 直男的思维。
要投其所好啊兄弟。

[itning]

送 DNA 啊

[JJLin]

这都 2020 年了，怎么还会有人送网站？！（额么，10 年前干过这蠢事）

[santom]

虽然不推荐，但是如果非要做的话 可以看下 animate.css 、anime.js 、jq 基本都比较简单

[mbtfdwlx]

不如买包 实体相册也不建议，包、口红、香水 都是万能的

[cnzfq]

挺好的。过来人中肯建议，亦可送一支口红(千万别选死亡芭比粉)，效果极佳。

[alienx717]

能不能直接做好放到他的电脑上，改一下 host 让他访问你设置的网址直接打开本地的地址

[respect11]

错误三次直接 close，然后你就可以问你女朋友为什么不爱你？一点都不了解你。

[lihua]

为什么要做网站，买包包啊。

[phytry]

想法那么多，不如做个视频，本地 nginx 跑个视频网页

[ipadpro4k]

不如买包买化妆品买吃的买情趣内衣买动森

[nimingdx123]

尴尬的一身鸡皮疙瘩。。。。出去吃一顿都比这个好

[sparrww]

女生才不喜欢这些的，兄弟

[fengbjhqs]

千万别，除非你女友也做做程序的，而且还不是前端

买个口红，吃一顿比这些都好

[tyhuohuo8]

网站不是所有人喜欢，还不如实际点，化妆品，吃饭，包包

[wangmn]

能有女生不喜欢 口红，包包吗？ 就像你喜欢数码产品一样

[szdubinbin]

前端业者，事实上这玩意你费心思去弄真的不一定弄的好看主要是，交互还有各种动画，响应式啥的，你会发现你弄了 2 小时之后，捶了一下桌子大喊一声 mmp 然后打开京东开始下单口红香水 iPhone......

[arden2016]

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

[651794071]

@szdubinbin 哈哈哈哈哈哈捶桌子太真实了

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

你是来炫耀的吧。。哈哈

[dot2017]

真实的 v2

[crazybinggan]

想起我送布偶公仔，事后想起来简直特大号的傻子（喂，织毛衣不）...
建站这种简直弱智啊（没有骂的意思，真的太直了）

当然祝你两甜甜蜜蜜，哈😝

[qq976739120]

求求了,没钱买个口红,有钱买个包,再找家网红店吃个西餐,你做个网站怎么让她拍照发朋友圈

[hahahazhou]

“包”治百病

[Neillou]

@651794071 然而并不是, 如果你真想讨好, 天热递扇子, 睡觉递枕(套)头(子). 需求得到满足才是硬道理. 逃 /

[brendanliu]

我刚问了下旁边的女同事，如果你对象在你生日为你做了个网站，我话还没说完，她就笑着对我说，拉黑。

[daishankeke]

我来说两句 关于做网站我还真做过实验
圣诞节那天找了个画圣诞老人的网页 发给一些女性朋友们 并附上圣诞快乐
她们都说这个可爱 她们收到这个很开心

具体操作步骤就是直接发链接 + 发一句圣诞快乐

[ajaxfunction]

一看就是刚刚步入社会的小青年。

这世界上 没有人对物质追求不大， 她说不大只是不想让人觉得世俗而已。

[EminemW]

你是傻子吗。。女朋友不说出来只是给你面子

[xiaoxinshiwo]

我曾经做过安卓 app,只会感动自己

[DamonLin]

还是送点物质上的东西吧 我觉得

[651794071]

@hwcj123 说到我心坎里去了！

[airfling]

说实话现在的好多网站还不如 qq 空间

[cuixiaoyan]

https://gitee.com/cuixiaoyan/birthdayTemplate

[lp7631010]

我觉得吧 你做个网站她有没有参与感 你这是在感动你自己啊 还不如送点礼物

[sth2018]

可以做网站 但绝对不能仅仅做网站。

[MaxTan]

太真实了，写个感动她到哭的网站

[neptuno]

建议做个小程序，上面放几个她常用的功能，，，

[fengtaida]

支持楼主
年轻人就要活力一点，青春洋溢哈
ps:别信楼上那些老男人的话，他们就是羡慕你有女朋友（手动滑稽）

[phxsuns]

送点实在的吧。。。
这东西费时间也不讨好。。。

[niubee1]

女友快过生日了，想做个网站给她。。。。。。。 骚年， 你应该考虑的是接个外包网站赚点钱给你女朋友买个包来得实在

[ak49]

评论里那么多人质疑女盆友不喜欢网站，你们都没有好好想想：人家要送的是什么网站么？！

[Gourds]

狗死的时候，没一个情侣是无辜的

[wujieyuan]

做网站送女友, 做 app 送女友, 这些行为尴尬可笑至极

[1rror]

要是有女生喜欢这种网站，我也不至于现在还是单身。

[sanqian]

送礼物吧 做什么网站！

[nasmatic]

https://github.com/hackerzhou/Love
说到给老婆做网站我一直记得这个 hacker zhou,供参考

[nasmatic]

卧槽，发现 hacker zhou 那个页面已经是 ex-love 了。。。

[651794071]

@nasmatic 谢谢...我之前搜集参考页面的时候也看到了

[qq525266]

@nasmatic 对不起我笑了

[justin2018]

买包 买衣服呀

“包”你满意

[zanyxd]

先借口登下淘宝借她手机 看收藏购物车，根据这个送礼就对了，上面网页点子前两点容易，最后一个印象有在 codepen.io 上看到过那种跟鼠标有物理碰撞效果的帘子 demo，但是没收藏…搜索相关词条应该可以找到

[Yumwey]

楼上的各位换个思路: 没准楼主只是想让女朋友得礼物更具备既视感呢？比如说:幕布打开，展示出惊喜礼物呢😊，或者整了个抽奖。

－－

当然，想起年轻时候的自己也写了个网页送女票，作为专业切图仔，不得秀两下。

－－

现在想想，尴尬的雅痞。纯憨憨思路才会对一个女性送网页，后续生日买 iphone，买口红香水明显开心的跳起来。

[zooo]

瞎说句：男女的思维差异真的挺大的。 我也是后来才明白的。

[jerryrib]

把你要抄的网站放上来

[Tubering]

我觉得大家真没必要挖苦楼主，毕竟不是每个女生都吃口红包包那一套

[zangbob]

依然不建议做网站，这玩意儿屁用没有。感动不了别人，顶多感动自己。

[PaPaTree]

@vanleon 楼主需不需要我不知道，但是我是学到了，感谢哈哈哈

[yolee]

真直男啊，送礼物表示的是你的态度，不能别人口头说不用送你就真的不送了。

[102errors]

建议不要折腾，还不如趁着头发茂密的时候多拍点合照