第四章：CSS高级
- transform：
平移
translate：translate(100px,100px)向右向上100pxtranslateX/Y(100px)向X/Y方向平移100pxtranslate(100%,100%)向右向上移动自身高度的距离旋转
rotate：rotate(90deg)默认顺时针旋转，锚点为中心点rotate(0.5turn)顺时针旋转半圈transform-origin:0 0将锚点改为左上角缩放
scale：scale(2)放大两倍scale(3,0.5)X轴方向放大为3倍，Y轴方向缩放为0.5倍scaleY/X、transform-origin同样适用错切
skew:skew(30deg,20deg)、skewX(30deg)、skewY(20deg)3D变换:
perspective(100px)设置视角（人眼距离屏幕距离z）rotateY、translate3d(10px,10px,20px)在3d空间内旋转平移
- transition：
属性：
- property : 指定哪个css属性需要过渡
- duration : 指定持续时间
- timing-function : 变化速度函数
- linear
- ease-in
- ease-out
- ease
- ease-in-out
- step
- delay : 指定延迟
- animation
属性：
name动画名duration持续时间timing-fucntion速度函数delay延迟iteration-count次数direction正反
使用
定义关键帧
@keyframes name{from{} 50%{} to{}}：使用
animation: name 1s ease infinite循环
animation-direction:alternate/reverse/normal正反交替播放/反向循环播放/正向循环播放
- 响应式
- 设置视口
viewport
1 | <meta name = "viewport" |
在布局页面时使用和设备同样的宽度
- 图片尺寸设置
1 | img{ |
大屏：正常展示（img比容器小）
小屏：自动缩小到容器大小（img比容器大）
- 背景图
background-size:content/cover：content-图片大端充满/cover-图片小端充满
- 媒体查询
@media screen and (max-width:480px){xxx}
屏幕最大宽度（小于）为480px时xxx
使用不同尺寸图片
srcset配合sizes属性：1
2
3
4
5<img srcset="/img/large.jpg 1200w
/img/normal.jpg 800w
/img/small.jpg 400w"
sizes= "(max-width 320px) 400px,
(max-width 640px) 800px">css兼容性