CSS3新特性总结

一、新增的选择器

1. :first-of-type()：选择该类型元素的第一个子元素
        p:first-of-type{
            color: yellow;
        }
2. :last-of-type()：选择该类型元素的最后一个元素
        P:last-of-type{
            color: blue;
        }
3. :nth-of-type()：从正序开始选择该类型的第几个元素
        p:nth-of-type(1){
            color: brown;
        }
4. :nth-last-of-type()：从倒序开始选择该类型的第几个元素
        p:nth-last-of-type(1){
            color: red;
        }
5. ::selection 选择用户鼠标选中的部分
        支持的css属性：color、background、cursor 以及 outline
        p::selection{
            background-color: red;
        }
6. :not 选择非用户指定内容的选择器
        .box :not(p){
            color: red;
        }
        意义：.box下除了p标签的字体颜色全部为red
7. :root 根节点选择
        :root{
            background-color: red;
        }
8. :enabled 选择状态可用的元素(input、button)
        input:enabled{
            border: 1px solid red;
        }
9. :disabled 选择状态不可用的元素(input、button)
        input:disabled{
            border: 1px solid blue;
        }
10 :checked 选择选中状态下的input标签
        input[type='radio']:checked{
            width: 35px;
            height: 35px;
        }
11 [attr='value'] 属性选择器
        div[class='mydiv']{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
12 target选择器 需要配合锚点和a标签使用，就是设置被激活锚点的样式
        #news:target{
            color: red;
        }
        <a href="#news">点击这里让news变红</a>
        <div id="news">news</div>

二、过渡(transition)和转换(transform)

1.转换(transform)
    2d转换有以下4种方式：
        translate() 根据x和y轴位置给定的参数，从当前元素位置移动
            .div1{
                transform: translate(50%,50%); // 50%是自身的50%
            }
        rotate() 在一个给定度数顺时针旋转的元素，负值为逆时针
            .div2{
                transform: rotate(70deg);
            }
        scale() 将元素缩放到原来大小的倍数，小于1代表缩小
            .div3{
                transform: scale(2.5);
            }
        skew() 包括两个参数值，分别表示x和y轴倾斜的角度
            .div4{
                transform: skew(20deg);
            }
    注意：除了基本方法外，transform-origin用来控制旋转原点，可以使用bottom、top、left、right、center。
            transform-origin: right bottom;
    组合写法：
        transform: rotate(50deg) translate(50px) scale(1.5)

2.过渡
    过渡是从一种样式到另一种样式的效果，transition有4个过渡属性：
        transition-property  应用过渡的css属性的名称
        transition-duration 规定过渡花费的时间，默认为0
        transition-timing-function 规定过渡效果的时间曲线，默认为ease
            linear      规定以相同速度开始至结束
            ease        规定慢速开始，然后变快，然后慢速结束的效果
            ease-in     规定以慢速开始的过渡效果
            ease-out    规定以慢速结束的过渡效果
            ease-in-out 规定以慢速开始和结束的过渡效果
        transition-delay 规定过渡效果何时开始，默认为0
    简写形式：transition: width 1s linear 2s(延时)
    实例：
            .div{
                width: 50px;
                height: 50px;
                background-color: red;
                transition: all 1s ease-out;
            }
            .div:hover{
                width: 100px;
                height: 100px;
                background-color: blue;
            }

三、鼠标交互

:hover选择器 
    .div1:hover +.div2{
        background-color: chartreuse;
    }
注意： +代表出现在其后的临近兄弟选择器  ~代表出现在其后的兄弟选择器

四：动画

1)创建动画：利用@keyframes规则创建动画
2)绑定动画：
    div {
        animation-name: 动画名;
        animation-duration: 5s; // 必须定义动画名称和时间
    }
    animation包含的属性有：
        animation-name：规定@keyframes动画的名称
        animation-duration 规定动画完成一个周期所画的秒或毫秒
        animation-timing-function 规定动画的速度曲线，默认为ease
        animation-delay 规定动画何时开始
        animation-iteration-count 规定动画被播放的次数,无限次为'infinite'
        animation-direction 规定动画播放方向，默认为'normal',
            normal: 正常播放
            reverse: 动画方向播放
            alternate: 动画在奇数次正向播放，偶数次反向播放
            alternate-reverse: 动画在奇数次方向播放，偶数次正向播放
        animation-play-state 规定动画是否正在运行或暂停，默认为running

    简写： animation: animation-name animation-duration animation-delay animation-iteration-count animation-timing-function animation-direction

3)实例
    @keyframes ani-percent{
        0% { background-color: red; left: 0; top: 0; }
        25% { background-color: yellow; left: 50px; top: 0; }
        50% { background-color: blue; left: 50px; top: 50px; }
        75% { background-color: black; left: 0; top: 50px; }
        100% { background-color: red; left: 0; top: 0; }
    }
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        animation-name: ani-percent;
        animation-duration: 5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }

五：多列

column-count：指定元素应该被分割的列数
column-gap：指定列与列之间的距离
column-rule：所有column-rule-*属性的缩写,可写为 1px solid red;
column-rule-color：指定两列间边框的颜色
column-rule-style：指定两列间边框的样式
column-rule-width：指定两列间边框的厚度
column-width：指定列的宽度