No.1 – 制作一个简单的菜单动画效果
第一课难度不大，主要是对CSS3的掌握和浏览器兼容的了解。效果实现方面下划线我写了个div，也可以用伪类实现，控制下划线效果只需要给下划线加个状态即可。
No.2 – 初步接触CSS 2D变形
第二课是对CSS3 2D效果变形的掌握，照着w3cschool敲一遍就可以了。只是最后一个盒子box5调了好久没调出来，后来看了下别人代码，是自己想多了。就和angular做项目一样，本以为需要自己动手写时间戳，原来早给提供好了管道一行就能够解决，多读读文档还是很有必要的！
No.3 – CSS transition 和 CSS transform 配合制作动画
第三课好有意思的说！实现了猫贱贱的笑的效果，胡子的特效用border-radius来实现了，但按要求应该用贝塞尔曲线来做，这里偷了个懒。
No.4 – 3D 空间的卡片翻转动效
这个效果也是很酷炫了，遇到的问题就是最开始做的时候没有3D翻面变形效果，看起来像是2D翻面。
No.5 – 纯 CSS 制作绕中轴旋转的立方体
做这个时候好想直接用Three.js，自己用原生js写没弄清楚就上手的话有点难度，需要同时考虑六个面和镜头的联系，否则转一下就畸形。
No.6 – 利用 CSS animation 制作一个炫酷的 Slider
这个做的时候需要考虑的方面很多，尤其是z-index来控制五张图片的先后顺序问题，要求被点击的图片永远在最上层，上次一点击的图片一定要在第二层才可以，并不是简单的图片切换。
No.7 – 使用 animate.css 实现一个优雅的登录框
效果包含三部分，（1）点击输入框label的变化（2）点击输入框下划线的效果（3）输入框填写完毕后按钮效果。
网友评论