No.3 - CSS transition 和 CSS transform 配合制作动画

任务
动画 demo
下载.html 文件

小结

静态图实现的方法：
①基本的组件是div，通过position的absolute定位，TRBL，padding,margin调整偏移
②圆滑的边框：
圆滑的边用了boder-radius：x x x x
左 上 有 下 可%
border描边可某一方向的边border-top,border-right,border-bottom,border-left

其他补充

再看其他人写的代码中，学习了一个新的东西，是HTML5中新的JS原生的class操作方法
在自己做的过程中，其实又发现耳朵的变化有不同视频的，想着用translate处理，不过好麻烦。在看到牛同学的方法和思路，原来通过transform-origin可以调整变化原点

，这位同学是transform-origin: 50% 100%
我觉得视频上应该是紫色的点刚好是 0% 70%