阅读并理解 strml.net 站点的动态效果的实现方式，然后自己进行实现。
该效果原理比较简单，就是将一段段的 CSS 代码和普通文本文件的内容，逐字符的添加到 HTML 中，并在每次添加之后延时一段时间，从而使得效果看起来仿佛是一个个的字符写出的效果，并有适当的停顿。
另外，对于可以自行编辑页面上显示的 CSS 代码而且实时渲染，是使用了 HTML5 中的contenteditable 属性，并监听元素的input事件，将编辑后的内容同步到页面的<style>元素中。
拷贝项目到本地，并安装相关依赖后，在本地可以如下的查看效果：
npm run dev如果要进行打包发布，可以如下处理：
npm run build注意：如果打包发布后，想通过本地的服务器查看效果，不能设置本地服务器的域名为
localhost，否则动画效果会很快。这是由于代码中是通过域名是否为localhost来判断是否处于开发状态。
整个效果的实现过程，采用了循序渐进的方式。整体上参考了 strml.net 的结构，并在实际的实现中做了适当的修改。
在项目的开始部分，需要先初始化部分全局性的变量、设置为了兼容 CSS3 效果的浏览器厂商前缀、设置相关事件监听等。
之所以使用全局性的变量，是为了方便在整个流程中的调用，而不用每次都进行传递。
打字效果就是整个动效中最重要的部分了，也是整个逻辑的重要部分。
向页面中打字有两种情况：一种是写入的文字是 CSS 样式，另一种是一般性的文字。对于 CSS 样式来说，除了将其写入到 HTML 中，还需要将其同步到<style>标签中，否则不会同步的出现效果。
使用 JS 代码修改 HTML 的内容，不会触发该元素的
input事件，所以不会自动的被相关的事件回调处理同步到<style>标签中。而这也方便我们对要写入的内容进行一定的处理，以提高性能。
在处理 CSS 相关的内容的时候，为了能够区分注释、选择器、属性、属性值等，需要分别从不同的关键字符入手，考虑各种情况，然后处理成带有对应类名的<span>元素。这个处理过程，strml.net 项目是使用正则来进行匹配的，而我这里则通过不同的缓存和标识来处理，因为我认为正则匹配有点耗费时间，而缓存方式则是使用内存换取速度。当然，相对于原项目来说，我这里对缓存也进行了一些处理，可能使用的内存也没有原先那么多。
打字的处理还有一些小细节，都是思考之后结果。当然，这都是针对当前的内容进行的处理，可能还有一些更特殊的情况，由于没有遇到，也就没有更多的考虑和处理。也就是说，可能通用性不是非常好。
在做翻转效果的时候，需要使用两层的结构，最外层控制整体的翻转情况，里面的控制使两个子元素的显示状态不同。而里面的个子元素中，一个是与父元素的显示相同，另一个则刚好上下、前后翻转。
翻转前后，父元素的滚动则与正常状态下相反，此时如果要变成正常状态的滚动，则需要禁止其默认的滚动，而通过mouse-wheel插件的回调来处理其滚动的距离。
当跳过动画的时候，并不能确定当前动画进行到哪一个步骤。与其设置一个变量记录当前的进度，然后根据不同的进度做不同的处理，不如直接将整个动画的处理流程全部一次性的重新处理一遍，这样可以最快的将最终效果展现出来。