过渡 动画 渐变 弹性盒子

一.过渡

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;