CSS中的变形（transform）
transform变形
- 对元素进行平移、旋转、缩放、倾斜
- translate
- rotate
- scale
- skew
- transform不会对其他元素布局产生影响
3D变形
transform: perspective()/translate3d()/rotateY()……
关于perspective（讲得很详细↓）
www.cnblogs.com/yanggeng/p/…
transition过渡
- 指定从一个状态到另一个状态时如何过渡
- 动画的意义：告诉用户发生了什么
- transition属性
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
eg: transition: width 1s linear 1s;
transition-timing-function: linear/ease-out/ease/ease-in/ease-in-out/steps(n);
animation
- 可以实现更复杂的样式变化效果
- 使用方法
- 定义关键帧样式
- 应用动画到元素上
- animation属性
- animation-name
- animation-duration
- animation-timing-function （快慢）
- animation-delay
- animation-iteration-count （播放次数）
- animation-direction （动画播放的方向：正序/逆序）
eg: animation: down 1.5s ease infinite;
响应式设计
- 设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- 图片尺寸设置
- 背景图片
background-size:cover/contain; - media query
针对不同的屏幕尺寸，应用不同的样式
@media screen and (min-width: 480px) {
}
可以查询的media：
- width/height
- device-width/device-height
- device-pixel-ratio
- orientation (是否横屏)
- 使用不同尺寸的图片
<img srcset="/img/large.jpg 1200w,
/img/normal.jpg 800w,
/img/small.jpg 400w"
sizes ="(max-width:320px) 400px,
(max-width:640px) 800px,
1200px"
src="/img/normal.jpg"
alt="description of the image">
- 字体大小改变
font-size+rem+media query
