今天跟大家唠唠我最近瞎折腾的一个小玩意儿——一个能“动”起来的伊索寓言官网。起因也挺简单的，前阵子在家收拾屋子，翻出来一本我小时候看过的《伊索寓言》，那书都泛黄了，边角也卷了。我就随手翻了几页，你还别说，这些老掉牙的故事，现在看看还是那么回事儿，里面讲的那些做人做事的道理，什么美与丑，怎么辨别好坏，怎么变得聪明有智慧，一点都不过时。
看着看着我就琢磨，这么好的东西，现在的孩子们还爱看吗？估计够呛。现在信息太多了，他们玩的看的都那么花里胡哨，光给他们看文字，估计没几个人能静下心来。我就想，能不能让这些经典故事也“潮”一把，用现在的方式包装一下，让它们“动”起来，吸引吸引眼球？
说干就干，动手！
就是有点爱瞎琢磨，一有想法就想试试。于是我就盘算着怎么弄这个“动起来的伊索寓言官网”。
第一步，肯定是内容整理。 我先把《伊索寓言》里那些我印象比较深、寓意也比较好的故事挑出来，比如《乌龟和兔子》、《狐狸和葡萄》、《狼来了》这些。然后把每个故事的原文和它想表达的道理简单整理了一下。这步不难，就是有点费工夫，得一个字一个字敲，还得琢磨怎么表达更通俗易懂。
第二步，设计“动”的效果。 这是核心了。我寻思着，也不能搞得太复杂，毕竟我不是专业做动画的。就想了一些简单的交互效果。比如：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 鼠标放上去，故事里的小动物图片能稍微晃动一下，或者眨眨眼。
- 点击某个故事标题，故事内容能平滑地展开，而不是“啪”一下跳出来。
- 在故事结尾，那个寓意可以用一种比较醒目的方式弹出来，或者慢慢浮现。
我当时想，这些小细节，应该能让整个网站看起来不那么死板，有点生气儿。
第三步，就是技术实现了。 我本身对前端这块儿还算熟悉，但也不精。就用了最基础的 HTML 搭骨架，CSS 来美化页面，然后用 JavaScript 来实现那些“动”的效果。这过程里也踩了不少坑。
比如，那个图片晃动的效果，一开始怎么调都觉得特别生硬，跟抽筋儿似的。后来上网查了查，又自己试了好几种不同的动画曲线，才勉强弄得自然一点。还有那个内容展开，一开始用的是直接改变高度，那效果，啧啧，简直是灾难，一卡一卡的。后来改用了过渡效果，配合最大高度的变化，总算是流畅了。
我还特意找了一些比较卡通、可爱的动物形象素材。都是些免费可商用的，咱得有版权意识嘛然后把这些图片用在我设想的那些小动画里。
过程中的小插曲和感悟
记得做《乌龟和兔子》那个故事的时候，我想让鼠标移到兔子身上时，兔子有个往前冲一下又缩回去的得意洋洋的动作，移到乌龟身上时，乌龟就踏踏实实地往前挪一小步。就这么个小细节，我调了老半天。一会儿是兔子冲过头了，一会儿是乌龟挪得看不出来。真是看着简单，做起来才知道不容易。
还有就是配色。一开始我选了个挺鲜艳的颜色，觉得孩子们会喜欢。结果自己看了半天，眼睛都快晃瞎了。后来还是改成了比较柔和、温馨的色调，毕竟是读物嘛还是得让人看得舒服才行。
最终的效果和一点点成就感
折腾了好几天，每天晚上吃完饭就坐在电脑前捣鼓。家人还说我，这么大岁数了，还跟小孩儿似的玩这些。我说你们不懂，这叫“寓教于乐”的现代化实践！
总算是把这个“动起来的伊索寓言官网”给弄得七七八八了。虽然功能很简单，动画效果也比不上人家专业的，但起码，那些经典的故事不再是冷冰冰的文字了。鼠标滑过，小动物会给你点小惊喜；点击一下，故事和道理就生动地展现在眼前。
我把做好的网站给我家小侄子看了看，他居然看得津津有味，还问我这个小狐狸为什么吃不到葡萄就说葡萄酸。那一刻，我觉得自己这几天的瞎折腾，值了！
总结一下，这回实践就是一次心血来潮的尝试。把老祖宗留下来的好东西，用现在年轻人更容易接受的方式重新演绎一下，我觉得挺有意义的。虽然过程有点磕磕绊绊，但最终看到成果，心里还是挺美的。这也算是我自己的一点小小的实践记录，分享给大家，希望能给大家一点启发，或者就是看个乐呵也行！
