CSS笔记4（过渡（transition）， 动画（animation）， 变形 ，less ，弹性盒，【 像素，视口，移动端，移动端页面，vw 】，【响应式布局，媒体查询】）

过渡（transition）

1、

• 通过过渡可以指定一个属性发生变化时的切换方式
• 通过过渡可以创建一些非常好的效果，提升用户的体验

2、属性

• transition-property：指定要执行过渡的属性
  多个属性之间用逗号隔开，如果所有的属性都需要过渡，则使用all关键字；大部分属性都指出过渡效果，注意过渡时必须时从一个有效值向另外一个有效值进行过渡

• transition-duration：指定过渡效果的持续时间
  时间单位： s 和 ms,1s=1000ms

• transition-timing-function：过渡的时序函数
  指定过渡的执行方式

网站为时序函数的网站
举例：

• transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

• transition可以设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中的第一个是持续时间，第二个是延迟时间

动画（animation）

• 动画和过渡类似，都是可以实现一些动态的效果；不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
• 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤

关键帧
test是可任意更换的名字

• animation-name：要对当前元素生效的关键帧的名字

.box{
animation-name:test;//test是名字
}

• animation-duration：动画执行的时间
• animation-delay：与过渡一致
• animation-timing-function：与过渡一致
• animation-iteration-count：动画执行的次数

• animation-direction：指定动画运行的方向

from to在关键帧中

• animation-play-state：设置动画的执行状态

• animation-fill-mode：动画的填充模式

变形

• 变形指通过CSS来改变元素的形状或位置
• 变形不会影响页面的布局
• transform：用来设置元素的变形效果
• 变形的默认原点：center，可使用transform-origin调整

transform-origin:20px 20px;

1、平移

.box{
transform:translate(100%);
transform:translate(-100px);//两种形式
}

可以使用变形来居中

.box{
position: absolute;
left: 50%;
transform: translateX(-50%);//水平居中
}

.box{
position: absolute;
top: 50%;
transform: translateY(-50%);//垂直居中
}

.box{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
//页面居中
}

2、z轴平移

• z轴平移，调整元素在z轴的位置，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近
• z轴属于立体效果（近大远小），默认情况下网页不支持透视，如果要看见效果，必须要设置网页的视距

3、 旋转

• 通过旋转可以使元素沿x,y,z旋转指定的角度

deg为角度

• 是否显示元素背面的属性

backface-visibility:hidden;//隐藏背面

4、缩放

less

1、less的简介

• less是一门css的预处理语言
• less是一个css的增强版，通过less可以编写更少的代码实现更强大的形式
• 在less中添加了许多的新特性，像对变量的支持，对mixin的支持
• less的语法大体上和css语法一样，但是less中增添了许多对css的扩展，要执行必须将less转换为css，再由浏览器执行

2、变量

• 在变量中可以存储一个任意的值，在我们需要时，任意的修改变量中的值
• 语法一：- -变量名

变量的使用
var( )

• 语法二：@变量名

（1）
（2）
（3）

（4）

3、计算函数

4、父元素和扩展

5、混合函数

• 在混合函数中可直接设置变量

弹性盒

1、flex（弹性盒）

• 是css中的又一种布局手段，它主要用来代替浮动来完成页面布局
• flex可以使元素变得有弹性，让元素可以跟着页面的大小的改变而改变
• 弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器；
通过display来设置弹性容器

• 弹性元素

弹性容器的子元素是弹性元素（弹性项）
如：ul是弹性容器，则li是弹性元素

2、用在弹性容器中决定弹性元素的属性

• flex-direction:指定弹性容器中弹性元素的排列方式

主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向称为侧轴

• flex-wrap:设置弹性元素是否在弹性容器中自动换行

• flex-flow:wrap和direction的简写属性

• justify-content：分配主轴上的空白空间（主轴上的元素如何排列）

• align-items：元素在横轴上如何对齐；元素间的关系

• align-content：横轴空白空间的分布

2.1、弹性元素的属性
(1)flex-grow:指定弹性元素的伸展系数

• 当父元素有多余空间时，子元素如何伸展
• 父元素的剩余空间，会按照比例进行分配

(2)flex-shrink:指定弹性元素的收缩系数

• 当父元素的空间不足以容纳所有的子元素时，对子元素进行收缩
• 缩减系数的计算方式比较复杂
• 缩减多少是根据缩减系数和元素大小来计算的

(3)align-self:用来覆盖当前弹性元素上的align-items

(4)元素的基础长度

• flex-basis:指定的是元素在主轴上的基础长度

(5)flex可以设置弹性元素所有的三个样式

(6)order可以用来决定弹性元素的排列方式

像素，视口，移动端，移动端页面，vw

1、像素

2、视口（viewport）

3、移动端

4、移动端页面

5、vw

响应式布局，媒体查询

一、响应式布局
1、

• 网页可以根据不同的设备或窗口大小呈现出不同的效果
• 使用响应式布局，可以使一个网页适用于所有的设备
• 响应布局的关键是 媒体查询
• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

2、使用媒体查询

• 语法： @media查询规则{ }

• 举例

二、媒体查询

• 媒体特性

举例：

介于两者之间的举例

• 样式切换的分界点称为断点，也就是网页的样式会在这个点时发生变化

一般常用的断点