创建一个令人毛骨悚然的网站

初学者如何创建一个令人毛骨悚然的网站

主意

你有没有过这样的经历：浏览某个网站，突然就想……不行，我真的不喜欢你。嗯，我就是这种情况，这让我开始思考……我该怎么办？

设计

背景：这是我所在地区的一家公司，举办令人惊叹的恐怖万圣节活动，这些活动每年都变得越来越受欢迎。

原版网站布局不清晰，难以阅读和浏览。而且，绝对不够惊悚！

显然，这只是我为了练习不同的编码技巧而想出的一个快速设计，因为我只是个初学者。我发现，对我来说，实际尝试构建一些东西是最容易学习编码的方法！

我在这里关注的关键概念是营造氛围，同时让它看起来更专业，从而吸引顾客。那么，我该如何用几行代码来营造这种氛围呢？它需要阴森、黑暗、有鬼魂，还有血腥！

规划

我决定在这个“小项目”中只使用 HTML 和 SCSS，如果需要的话再加一些 JavaScript。我对 SCSS 非常陌生，所以一直在尽可能多地使用它，所以觉得这是一个绝佳的机会。

• 家乡英雄

这是最重要的部分。顾客看到的第一眼，他们会滚动查看更多内容吗？还是会点击那个令人畏惧的返回按钮？这部分内容需要引人注目，营造氛围，让人们在短短几个像素的范围内想要了解更多。

我花了很多时间浏览 Pinterest 和 Dribbble，寻找最新的“热门”网站趋势——我强烈建议你这样做来改进你的设计！——但我看到了一个我很喜欢的文字故障效果。抱歉，我不记得最初在哪里或什么时候看到的了！所以我打开谷歌，找到了很多关于如何实现这个效果的教程。太好了，我几乎可以立即捕捉到那种怪诞的氛围，只需要一个效果。加上一个黑暗恐怖的背景和一个导航栏……BOOM，主屏幕英雄计划好了。

• 新活动

专门为吸引现有客户和新客户而设立的部分！

它的作用是广告，所以我希望它具有很强的互动性，能够更好地展现活动的精彩内容。我还喜欢网站上卡片的使用方式，因为它能清晰地展示你提供的内容。所以，我又回到谷歌，找到了一些只使用 HTML 和 SCSS 的互动卡片。

• 亮点

这纯粹是一个信息部分，展示您所拥有的东西。

在为上一节寻找交互式卡片时，我发现了“翻转卡片”，我决定将其用于此节，因为它鼓励人们点击并了解更多信息。

• 口号

“你敢吗？”我问道，我怎样才能让它如此有效……血！

在浏览前端创意的时候，我看到了一些制作水滴的教程。我当时觉得，只要改变一下颜色，就能做出血滴的效果，简直太简单了。太刺激了！

代码

• 家乡英雄

图像上的故障文本和故障效果背景的代码。

• 新活动

带有动画栏和按钮的交互式卡片。

• 亮点

信息翻转卡。

• 口号

带有滴血效果的口号。

• 附加功能

我在家里的英雄中使用的箭。

结果

我太喜欢最终的成果了。虽然只花了我几个小时，而且只是为了练习一下新代码，但我觉得它满足了我的所有需求。

在这个过程中，我也学到了很多新东西。用CSS动画制作血滴效果其实相当困难和复杂，所以我肯定需要重新学习这个领域，因为我完全理解，如果使用得当，效果会非常好。翻转卡片也一样，这真的让我惊喜不已。我最喜欢的部分是制作故障效果，我觉得它看起来太酷了！

在我的推特上查看完整结果：

结论

我学习编程已经一个多月了，真的很享受。我很喜欢现在的成果，当最终成果比想象中更好时，总是会非常有成就感。当然，它并不完美，我仍然觉得自己几乎不知道自己在做什么。所以，如果你有任何建议或反馈，请随时告诉我，因为我渴望学习新事物！

免责声明：请注意，以上所有操作我都遵循了教程，但已尽力将代码做到极致，因此如果代码不够完美，敬请谅解。此外，它还不支持响应式设计，因为这不是我关注的重点。