最近一直有个小期许，就是要把一年中的节日都给统统做上一遍h5，正好赶上三八节，小伙伴们凑在一块儿一商量，就决定做这个了。找个没有雾霾天儿的下午，几个人凑在一起，拿小黑笔往白版上那么一画，各自絮叨絮叨自己的方案，再选个最优解，整个策划就这样完成啦~ 当然整个过程并没有说的那么轻松但也还算是顺利~~

其实三八节的案例，还是挺忌讳走根正苗红的歌颂妇女风的，原因很简单，千篇一律没意思嘛。说实话，作为一位正经八百的girl，与其对我颂公颂德不如直接夸我好看！！所以这个风格pass。

既然不走感情牌，那就试试逗比贱。说实话，一想到三八妇女节，就能让我想起初高中的时候，每到三月八日都有一群贱兮兮的男生假模假样的祝你三八妇女节快乐，还尤其着重“妇女”二字，常常是搞得青春期的小女生气个半死。幸亏那时候后还没有真的满十八岁，多少还有回嘴的说头。但不管怎样，就算是满了18岁，也没有哪个女生愿意被人称作为妇女吧？

所以我们觉得，很有必要向广大男同胞进行一下“三八节の正确问候方式”的科普。所以我们招募了在家忙碌的奶奶，在外认真工作的女老板，在学校勤奋学习的女同学，和软软萌萌的女朋友来担任教官，确保男同胞的科普效果。以下是我们教官的名片~

因为需要我们的教官，能够生动的动画教学，所以设计起来还是蛮费力的。有一款软件叫paper，我们的设计就在这个软件上让教官一点点成型。

啊，当然....上图中的那几笔烂字是我后加的哈哈~

然后在用photoshop制作成稿，最后就由前端人员来负责啦~

前端拿到稿第一步就是先切图，话说这次的稿可没那么好切的说，花费的时间比平时多了一半儿，不过最后倒也顺顺利利的做完啦。

有好多图其实可以分开切的，但由于时间紧张，就都切到一起了，最终导致整个h5的大小直逼6M，真心不小，实在是罪过。

没有引用游戏引擎，动画效果是用js切换的图片，每200ms或300ms更换一组图片，这样就有动画的感觉了，实现起来还是挺容易的，难度不大。还有一些动画效果是拿css3实现的，这个嘛，就更容易了。

背景音乐找的是Softly, As in a Morning Sunrise，大学看记录片的时候听来的，整首歌比较轻松诙谐，拿来当背景音乐正好。就是整首歌文件略大，被我裁了不少，有些可惜呢~打斗的声音也是从网上找的音效，就是时间有限，只找了1种配音，所以无论是鸡毛掸子抽打还是巴掌拍亦或是鞭子打都是一种效果，这个也算是一点小瑕疵吧~

有了背景音和效果音，整个h5一下子就丰满了不少，尤其是鸡毛掸子那位，抽打的效果可赞了呢~

总而言之，上线后的效果还是不错的，就是刚上线的时候，并发有点儿大，加载速度很慢，不过后来升级了带宽后这个问题也就轻松解决啦~

来，让咱们上个截图：

奶奶鸡毛掸子教育版:

女老板抽鞭子教育版：

女朋友甩巴掌教育版：

女同学铅笔攻击教育版：

其实三八节怎么过好呢，我也不知道，如果过的话，就被扣上了“妇女”的帽子，但要不过的话，岂不是少了个向男（老）友（公）和各种机构讨要福利的机会了...不过要是过的话，又不甘心，所以每年这个时候女生们都超尴尬的。。。所以你看，如果三月八日过的是少女节多好！这样就没有那么多事儿了~

以上！

本次唠叨结束

粘上本案例二维码，手机扫描浏览谢谢！