Day13 形变动画 vertical align
课程内容
额外知识补充
- transform
- 垂直居中总结
- transition 过度动画
- animation 关键帧动画
- vertical-align
视频
01_(了解) 今日内容概述.mp4
02_(掌握) transform 的介绍以及常见 transform-function.mp4
03_(掌握) transform-translate 的使用和.mp4
04_(掌握) 元素水平和垂直居中的方案总结.mp4
05_(掌握) transform-scale 的使用.mp4
06_(掌握) transform-rotate 的使用.mp4
07_(掌握) transform-origin 改变形变原点.mp4
08_(理解) transform-skew 和 transfor.mp4
09_(掌握) CSSTransition 的介绍和可动画属性.mp4
10_(掌握) CSSTransition 的常见属性使用.mp4
11_(理解) transform-translate-tra.mp4
12_(理解) 元素的宽度和高度变化问题.mp4
13_(掌握) transition 动画的缺点以及 Animat.mp4
14_(掌握) keyframes 和 animation 的序列帧.mp4
15_(理解) 块级元素中行盒的概念和作用.mp4
16_(理解) 行内级元素在行盒中 baseline 对齐.mp4
17_(理解) 内容总结和作业布置.mp4
笔记
📄️ CSS 属性 transform
- transform - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 平移函数 translate
- transform-function - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 水平居中方案
使用 Flexbox
📄️ 垂直居中方案
使用 Flexbox
📄️ 缩放函数 scale
transform-function - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 旋转函数 rotate
transform-function - CSS:层叠样式表 | MDN (mozilla.org)
📄️ CSS 属性 transform-origin 形变原点
transform-origin - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 倾斜函数 skew
transform-function - CSS:层叠样式表 | MDN (mozilla.org)