CSS3笔记二

动画 animation

animation:动画名称 花费时间 运动曲线 等待时间 播放次数 是否反方向播放
infinite：循环播放
alternate：反方向播放

 animation: move 4s linear infinite alternate;

定义动画

  @keyframes move {
            from{
                left: 0;
                background-color: red;
            }
            to{
                left: 800px;
                background-color: yellow;
            }
        }

 @keyframes move {
            0%{
                left: 0;
                top: 10px;
                background-color: red;
            }
            50%{
                left: 600px;
                top:600px;
                background-color: yellow;
            }
            100%{
                left: 1000px;
                top:10px;
                background-color: green;
            }
        }

线性渐变
linear-gradient(方向,颜色1，颜色2，…)
参数：
1)方向：to top bottom right left ||角度(向上0deg,向右90deg,向下180deg,向左270deg)
2)颜色及位置

background: linear-gradient(to right bottom,red,orange,yellow 5%,green)

径向渐变
radial-gradient(形状,大小,圆心,颜色1,颜色2,…)
形状：circle ellipse(默认)
大小：closest-side farthest-side closest-corner farthest-corner
圆心：center left right top bottom || 数值 (例如:at center left 或者 at 10px 10px )
颜色及位置

background: radial-gradient(circle ,orange,red)

伸缩布局样式属性
给父盒子设置：

display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

flex:1;

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

justify-content调整主轴对齐（水平对齐）

• flex-start ------默认值。项目位于容器的开头， 让子元素从父容器的开头开始排序但是盒子顺序不变
• flex-end------让子元素从父容器的后面开始排序但是盒子顺序不变
• center------让子元素在父容器中间显示
• space-between ----左右的盒子贴近父盒子，中间的平均分布空白间距
• space-around -----项目位于各行之前、之间、之后都留有空白的容器内，相当于给每个盒子添加了左右margin外边距
• initial -----设置该属性为它的默认值
• inherit----- 从父元素继承该属性。

align-items调整侧轴对齐（垂直对齐）

• stretch----默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
• center-----项目位于容器的中心，垂直居中。
• flex-start-----项目位于容器的开头，垂直对齐开始位置 上对齐。
  flex-end-----项目位于容器的结尾，垂直对齐结束位置 底对齐。

flex-wrap控制是否换行

• nowrap----默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
• wrap------规定灵活的项目在必要的时候拆行或拆列。
• wrap-reverse-----规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序

。