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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1655 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

第 1 条附言 · 2020-04-29 13:49:42 +08:00

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

第 2 条附言 · 2020-04-29 14:40:07 +08:00

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

第 3 条附言 · 2020-04-29 16:53:05 +08:00

最后一次补充

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

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

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

GitHub

效果

实现

掀开

120 条回复 • 2020-04-30 20:48:29 +08:00

1 2

❮

❯

maichael

2020-04-29 12:36:47 +08:00

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

WEBUG

2020-04-29 12:37:24 +08:00 via Android

建议就是不要做网站

putaozhenhaochi

2020-04-29 12:38:15 +08:00 via Android

直男啊。

zooo

2020-04-29 12:39:25 +08:00

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

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

amanbolatbalabek

2020-04-29 12:39:35 +08:00 via iPhone

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

corningsun

2020-04-29 12:40:31 +08:00 via iPhone

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

Perry

2020-04-29 12:40:43 +08:00 via iPhone

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

aabbcc112233

2020-04-29 12:41:21 +08:00

投其所好比较重要。

651794071

2020-04-29 12:42:30 +08:00

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

yeqizhang

2020-04-29 12:43:07 +08:00 via Android

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

Track13

2020-04-29 12:44:17 +08:00 via Android

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

baiduyixia

2020-04-29 12:46:23 +08:00

还不如给她买个 lv 的包包

651794071

2020-04-29 12:46:55 +08:00

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

651794071

2020-04-29 12:49:07 +08:00

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

ayase252

2020-04-29 12:49:20 +08:00 via iPhone

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

Raynard

2020-04-29 12:51:11 +08:00

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

berserk

2020-04-29 12:51:22 +08:00

不如买包+1

651794071

2020-04-29 12:53:14 +08:00

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

Weixiao0725

2020-04-29 12:59:02 +08:00

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

vanleon

2020-04-29 13:04:20 +08:00

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

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

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

piqq

2020-04-29 13:28:57 +08:00

女朋友会喜欢网站吗？

alw

2020-04-29 13:37:05 +08:00

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

itning

2020-04-29 13:37:19 +08:00 via Android

送 DNA 啊

JJLin

2020-04-29 13:39:14 +08:00

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

santom

2020-04-29 13:42:50 +08:00

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

mbtfdwlx

2020-04-29 13:43:13 +08:00

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

cnzfq

2020-04-29 13:44:40 +08:00 via iPhone

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

alienx717

2020-04-29 13:47:03 +08:00

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

respect11

2020-04-29 13:50:28 +08:00

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

lihua

2020-04-29 13:51:50 +08:00

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

phytry

2020-04-29 14:00:51 +08:00

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

ipadpro4k

2020-04-29 14:04:55 +08:00

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

nimingdx123

2020-04-29 14:10:08 +08:00

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

sparrww

2020-04-29 14:11:02 +08:00

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

fengbjhqs

2020-04-29 14:29:09 +08:00

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

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

tyhuohuo8

2020-04-29 14:30:18 +08:00

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

wangmn

2020-04-29 14:30:31 +08:00

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

szdubinbin

2020-04-29 14:31:19 +08:00

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

arden2016

2020-04-29 14:31:52 +08:00

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

651794071

2020-04-29 14:32:23 +08:00

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

ji39

2020-04-29 14:34:43 +08:00

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

Neillou

2020-04-29 14:37:56 +08:00

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

chengxiao

2020-04-29 14:39:33 +08:00

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

lietoumai

2020-04-29 14:39:58 +08:00

是不是你想做个网站。。

maskerTUI

2020-04-29 14:40:23 +08:00

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

651794071

2020-04-29 14:40:40 +08:00

@lietoumai 哈哈哈哈哈是的

stimw

2020-04-29 14:40:50 +08:00 via Android

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

651794071

2020-04-29 14:41:30 +08:00

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

SilentDepth

2020-04-29 14:44:29 +08:00

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

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

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

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

651794071

2020-04-29 14:47:36 +08:00

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

yueshang1

2020-04-29 14:49:32 +08:00

口红项链包哪个不香？

lg106

2020-04-29 14:58:54 +08:00

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

qq525266

2020-04-29 15:21:56 +08:00

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

siknet

2020-04-29 15:25:21 +08:00 via Android

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

azoon

2020-04-29 15:25:37 +08:00

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

hwcj123

2020-04-29 15:29:46 +08:00

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

ryansvn

2020-04-29 15:30:23 +08:00

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

POPOEVER

2020-04-29 15:33:07 +08:00

唉……

keaideren

2020-04-29 15:40:11 +08:00

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

BigBunny

2020-04-29 15:46:47 +08:00

你是来炫耀的吧。。哈哈

dot2017

2020-04-29 15:47:40 +08:00

真实的 v2

crazybinggan

2020-04-29 15:52:30 +08:00

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

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

qq976739120

2020-04-29 15:57:09 +08:00

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

hahahazhou

2020-04-29 15:57:18 +08:00

“包”治百病

Neillou

2020-04-29 16:01:22 +08:00

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

brendanliu

2020-04-29 16:15:11 +08:00

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

daishankeke

2020-04-29 16:23:42 +08:00

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

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

ajaxfunction

2020-04-29 16:31:20 +08:00

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

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

EminemW

2020-04-29 16:38:54 +08:00

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

xiaoxinshiwo

2020-04-29 16:49:45 +08:00

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

DamonLin

2020-04-29 16:52:16 +08:00

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

651794071

2020-04-29 16:54:31 +08:00

@hwcj123 说到我心坎里去了！

airfling

2020-04-29 16:56:52 +08:00

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

cuixiaoyan

2020-04-29 16:59:01 +08:00

https://gitee.com/cuixiaoyan/birthdayTemplate

lp7631010

2020-04-29 17:02:17 +08:00

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

sth2018

2020-04-29 17:03:50 +08:00

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

MaxTan

2020-04-29 17:09:07 +08:00

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

neptuno

2020-04-29 17:09:48 +08:00

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

fengtaida

2020-04-29 17:11:20 +08:00

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

phxsuns

2020-04-29 17:20:07 +08:00

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

niubee1

2020-04-29 17:40:47 +08:00

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

ak49

2020-04-29 17:51:59 +08:00

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

Gourds

2020-04-29 17:53:16 +08:00

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

wujieyuan

2020-04-29 17:56:45 +08:00

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

1rror

2020-04-29 18:08:41 +08:00

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

sanqian

2020-04-29 18:18:18 +08:00

送礼物吧做什么网站！

nasmatic

2020-04-29 18:40:27 +08:00

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

nasmatic

2020-04-29 18:41:26 +08:00

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

651794071

2020-04-29 18:45:13 +08:00

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

qq525266

2020-04-29 19:13:37 +08:00

@nasmatic 对不起我笑了

justin2018

2020-04-29 19:20:35 +08:00

买包买衣服呀

“包”你满意

zanyxd

2020-04-29 19:42:28 +08:00 via Android

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

Yumwey

2020-04-29 19:46:08 +08:00 via Android

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

－－

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

－－

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

zooo

2020-04-29 19:50:38 +08:00

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