第四章: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兼容性