一.过渡
transition:过渡属性1 执行时间 延迟时间 变化曲线,属性2同上
注意 :过渡只适用属性值可以数字化的 比如display就不能过渡.
二.动画 (关键帧)
1.定义动画
@keyframes 动画名{
0%{ 初始状态}
100%{结束状态}
}
2.调用执行动画
animation:动画名 执行时间 延迟时间 执行次数(infinite) 变化曲线(linear) 方向(alternate)
3.暂停
animation-play-state:paused暂停 | running执行
三.背景图大小 渐变
background-size:宽度 高度
渐变 line-gradient
线性渐变
1.基础渐变
background:linear-gradient(颜色1,颜色2)
2.设置渐变的方向
background:linear-gradient(to方向,颜色1,颜色2)
3.设置渐变的比例
background:linear-gradient(颜色1*%,颜色2*%)
4.对角渐变
background-linear-gradient(to 方向1 2,颜色1,颜色2)
5.设置对角角度
background:linear-gradient(*deg,颜色1,颜色2)
径向渐变
1.基础渐变
background:radial-gradient(颜色1,颜色2)
2.渐变比例
background:radia(颜色1 *%,颜色2 *%)
3.设置渐变图案
background:radial-gradient:(circle | ellipse,颜色1%)
重复渐变
重复线性渐变
background:repeating-linear-gradient(颜色1 *%,颜色2 *%)
重复径向渐变
background:repeating-radial-gradient(颜色1 *%,颜色2 *%)
四.弹性盒子
概念:一种新的布局方式 主要是让元素有能力控制子元素的排列方式 常用于手机端
容器身上的属性
1.设置为容器
容器上的属性
display:flex |ine-flex; flex是弹性盒子 line-flex是行内弹性盒子 宽高由内容撑大
2.设置主轴的排列方向
flex-direction:column列 |rol行
3.设置主轴的排列方式
justify-content:flex-start | flex-end |center space-between |space-around |space-evenly
4.设置在侧轴的排列方式
align-items:center flex-start | flex-end
5.是否换行
flex-wrap:wrap |nowrap
6.多根轴排列方式
align-content:justify-content:flex-start | flex-end |center space-between |space-around |space-evenly
注意 单根轴无效
7.复合属性
flex-flow:方向 是否换行
8.项目身上的属性
项目的排序
order:数字 默认为0 排序从小到大 可正可负
项目缩小
flex-shrink:数字
默认为1 缩小 0为不缩小
项目扩大
flex-grow:数字
默认为0 不扩大 1要放大
项目的复合属性
flex:1;
代表 扩大 缩小 auto(basis 基本尺寸)
项目的单独的排列方式
align-self:center |flex-start |flex-end;