主要内容:CSS3
1、background属性扩展,如clip、sizing、多背景图等;
2、流行动画库:animate.css,hover.css;
3、CSS3 3D转换、景深(视角);
4、弹性布局基础用法;
5、常用容器属性:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content;
6、常用元素属性:order、flex-grow、flex-shrink等;
7、使用flex演示常见布局结构;
8、案例:摩天轮动画,loading动画;
9、案例:3D盒子、旋转立方体,旋转木马;
CSS参考手册:
http://eduppp.cn/web/css/
Animate.css参考手册:
https://www.dowebok.com/demo/2014/98/
Hover.css参考手册:
http://ianlunn.github.io/Hover/
文档:
CSS 3D变换:
https://www.w3school.com.cn/css3/css3_3dtransform.asp
https://www.runoob.com/css3/css3-3dtransforms.html
CSS 2D/3D变换推荐阅读:
https://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/
https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
https://www.zhangxinxu.com/wordpress/2018/06/css-css3-3d-open-door-animation/
弹性布局:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html