Css3渐变及转换

2015-04-25

渐变

1 线性渐变 liner-gradient 
    有四个属性值：方向 起始颜色 终止颜色 距离
    默认的方向是自上向下，距离就是div的高度
    例: 实现一个45度的渐变，起始颜色黄色，终止颜色粉色，距离就是div的宽度
    background-image:linear-gradient(-45deg,yellow,pink)
2 径向渐变 radial-gradient
    background-image:radial-gradient(半径 at 位置 ，颜色，颜色)

CSS3的过渡属性

1 如变化的属性过多就用 transition:all 
2 过度持续时间 transition-duration:1s;
3 设置过度速度 transition-timing-function:linear/ease(匀速/缓慢);
4 过渡延迟时间 transition-delay:1s;

转换

transform:translate X(横坐标：正向右，负向左)
transform:translate Y(纵坐标：正向下，负向上)
transform:translate(-50%,-50%) 未知盒子宽高居中

水平居中一个已知尺寸的元素
position:absolute;
top:50%;
left:50%;
margin-top:-高的一半;
margin-left:-宽的一半;

水平居中一个未知尺寸的元素
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)

旋转 transform:rotate;

1 transform:rotate(正值为顺时针，负值为逆时针)
 rotateX() 横坐标旋转 routeY()  纵坐标旋转
 2 transform:scole(?) ? 为放大倍数
 scoleX() 横坐标缩放 scoleY()纵坐标缩放
 3 倾斜 transform:skew(30deg)

动画

动画的创建： 关键字：@keyframes 动画名称
格式：@keyframes 动画名称{
        百分比{}
        百分比{}
        }
1 动画名称 animation-name (需要调用)
2 动画延迟 animation-dely:3s;
3 动画总时间 animation-duration:5s;
4 动画速度 animation-timing-function:liner;
5 动画次数 animation-iteration-count:?
6 控制动画完成时的状态 animation-fill-mode:back wards(回到初)/both()

动画创建方式一：
@keyframes move {
    0%{
        transform:translate(0px,0px);
    }
    25%{
    transform:translate(500px,0px)
    }
    50%{
        transform:translate(500px,500px)
    }
    75{
        transform:translate(0px,500px)
    }
    100%{
        transform:translate(0px,0px)
    }
}
创建的第二中方法：
@keyframes route{
    from{
        transform:translate(0deg);
    }
    to{
        transform:translate(360deg)
    }
}

伸缩布局

1 传统布局：基于盒状模型，依赖 display属性 + position属性 + float属性
缺点：不方便，比如垂直居中不容易实现
2 伸缩布局
1）伸缩容器：只要给某个元素display:flex 就是伸缩容器
2）伸缩项目：只要包含在伸缩容器中的直接子元素，就是伸缩项目
3）主轴：是可以调整方向的，默认是水平方向
4）侧轴：侧轴是垂直于主轴的

伸缩布局的相关属性并解释其含义

1 设置某个元素为伸缩容器    display:flex;
2 调整伸缩容器的主轴方向 
    flex-direction:row 从左向右
    flex-direction:row-reverse 从右向左
    flex-direction:column 从上往下
    flex-direction:column-reverse 从下往上

3 主轴对齐方式
    justify-content:flex-start 主轴起点对齐
    justify-content:flex-end 主轴终点对齐
    justify-content:flex-center 中心对齐
    justify-content:flex-space-between 两端对齐
    justify-content:flex-space-around 控件环绕
4 设置伸缩项目是否换行
    flex-wrap:nowrap 默认不换行
    flex-wrap:wrap 换行
5 设置侧轴对齐方式
    align-items:flex-start 侧轴起点对齐
    align-items:flex-end 侧轴终点对齐
    align-items:center 侧轴中心对齐
    align-items:stretch 拉伸
6 设置换行后的对齐方式
    align-content:flex-start 侧轴起点对齐
    align-content:flex-end 侧轴终点对齐
    align-content:flex-center 中心对齐
    align-content:space-between 两端对齐
    align-content:space-around 控件环绕