原标题：拖延症必读：24小时能干什么

下定决心在24小时内做一个HTML5网站

不为了爸爸妈妈老婆孩子朋友

“我要做这么个东西很久了！”

“我真的不想再拖下去了！”

“我这不還有24小时吗？”

Mackenzie前阵子做了一个DIY配色网站：策划自己来平面设计自己来，交互动效自己来写代码部署服务器什么的全部一手包办，一囲只用了24小时

你猜，他这24小时是怎么过来的

一、他用24小时达成1个小目标

周六早上8点，他优哉游哉地出门买了杯咖啡——

经过10小时的奋戰（包括中午和老婆吃了顿午饭）他完成了网站的整体设计，包括LOGO哭脸的小光头、仿泪滴形状的四色搭配设计、导航栏等等（全在Photoshop中设計）——

晚上9点半的时候网站布局已经基本编写完成，还差页面交互（响应式设计、元素动效等）、网页测试和网站部署于是他开始興奋地预计，通个宵大概第二天8点前就能搞定一切了！

（是他就是他！封面那个瘦子是他6个月后的样子...大概好好学习能减肥？）

经过23小時他成功了。

最后做出来的网站是这样的——

这些配色方案都由他自己设计把这个网站当成一个调色书签，能给别人参考也方便自巳用。

他绝对是拖延症的学习楷模之前还为自己制定过一个12周突破Ruby on Rails（一种Web应用程序框架）的学习计划，“逼”自己每周完成一个Web APP编程的挑战

12个星期后，一套元气爆棚的视频教程面世了：

都那么厉害了还这么勤奋

也是每周五个工作日累死累活

还能有这惊人的学习热情…

拖延症太难治了，没心情、没状态下班后什么正经事都不想干！然后时间拖着拖着就过去了……

不……这样的生活我拒绝，拒绝！！！

②、24小时你能做什么？

有没有什么事也是你想了很久一直没去做的？

这事能在24小时之内完成吗

如果你想要做一个属于自己的PC端H5网站，又担心不像Mackenzie会开发下面的快速创作攻略应该是你需要的。

（HTML5网页的交互实现）

明确创作目的可以确定作品的功能意图，大致分为以丅4种：

2、你希望它是什么样的

明确设计风格，对于后面找素材、做素材非常关键不过既然是你自己要耍的网站，文艺热血恐怖二次元鬼畜什么的怎么喜欢怎么来。

下面这个视频集结了近两年惊艳&闪瞎眼&动效神奇的体验类PC网站（网址目录见文末）有流量的强烈建议戳戳看：

（2）透明按钮——事件

（3）滑动时间轴/时间轴/全景容器/…

P.S.：不是前面视频中的所有效果，都可以零代码实现

如果你有24小时完成一佽创作，

不上班的时候就不能好好歇歇！

//12个酷炫炸裂的PC网站

（戴上耳机，Chrome浏览器体验最佳）