字学校园-前端基础课程笔记

第四章：CSS高级

1. transform：

• 平移translate：

  translate(100px,100px)向右向上100px

  translateX/Y(100px)向X/Y方向平移100px

  translate(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空间内旋转平移

2. transition：

属性：

• property : 指定哪个css属性需要过渡
• duration : 指定持续时间
• timing-function : 变化速度函数
  • linear
  • ease-in
  • ease-out
  • ease
  • ease-in-out
  • step
• delay : 指定延迟

3. animation

属性：

• name 动画名
• duration 持续时间
• timing-fucntion 速度函数
• delay延迟
• iteration-count 次数
• direction 正反

使用

• 定义关键帧@keyframes name{from{} 50%{} to{}}：

• 使用animation: name 1s ease infinite

• 循环animation-direction:alternate/reverse/normal 正反交替播放/反向循环播放/正向循环播放

4. 响应式

• 设置视口viewport

1
2

<meta name = "viewport"
	content = "width=device-width, initial-scale=1.0">

在布局页面时使用和设备同样的宽度

• 图片尺寸设置

1
2
3

img{
	max-width:100%
}

大屏：正常展示（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兼容性