动画
transform变形？
- 不会对其他元素布局产生影响
- translate平移，传入参数为x轴移动距离和y轴移动距离，百分比是相对于自身宽高度
- rotate旋转，围绕自身中心点，正顺负逆，deg旋转度数turn圈数
- scale缩放，传入参数为x轴放大倍数和y轴放大倍数
- skew倾斜，传入参数为x轴倾斜度数和y轴倾斜度数
- 3d变形效果perspective，传入参数为人眼距屏幕距离，越小3d效果越明显
transition过渡?
- 从一个状态变换为另一种状态的效果
- property设置动画的属性，all
- duration过渡持续的时间
- timing-function速度,linear线性匀速变换，ease-out先快后慢，step(4)分为四个阶段
- delay延迟
animation?
- 定义更复杂的样式变换效果
- 先定义每帧的样式，再应用到元素上
@keyframes定义关键帧,包含from状态样式、to状态样式、中间动画百分比时状态样式- 应用到元素上：设置
animation:关键帧名称 动画持续时间 速度 iteration-count(播放次数)animation-direction动画播放顺序，normal表示从from过渡到to再初始化为from,alternate表示正反交替
什么是响应式设计？
同一个页面可以适应不同的设备的解决方案
- 设置viewport视口，通过meta标签
- 图片尺度设置，max-width设置为100%
- 背景图设置background-size,cover图片适应容器,contain保证图片原始比例
- media-query适配不同的屏幕大小，
@media screen and (min-width:480px)适配屏幕宽度大于等于480px的样式 - 适用不同尺寸的图片，srcset
- 字体大小适配，px,rem(相对于根节点字体大小比例)
