CSS3有哪些新特性？

CSS3实现圆角 (border-radius: 8px)

阴影 (box-shadow: 10px)

对文字加特效 (text-shadow)

线性渐变（gradient）

旋转（transform)：rotate(9deg)

缩放 (transform)：scale(0.85，0.90)

倾斜（transform)：skew（-9deg，0deg）

过渡效果（transition)

动画效果（animation)

增加了更多的选择器

---

CSS3选择器

nth-child 

nth-last-child(n)

nth-of-type(n)

nth-last-of-type(n)

last-child

first-of-type

only-child

only-of-type

empty

checked

enabled

disabled

selection

not(s)

first-child：第一个直接字节点

 

---

 

CSS3的Animation

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @-webkit-keyframes animal {
            0% {
                opacity: 0;
                font-size: 12px;
            }

            100% {
                opacity: 1;
                font-size: 24px;
            }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #f2f2f2;
            
            -webkit-animation-name: animal;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-iteration-count: 4;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
        }
    </style>
    <div class="box">box</div>

animation有八个动画属性：

animation-name：              规定需要绑定到选择器的keyframe名称。

animation-duration：          规定完成动画所花费的时候，以秒或毫秒计。

animation-timing-function：规定动画的速度曲线， 设置动画播放方式。

animation-delay：               规定动画开始之前的延迟。

animation-iteration-count： 规定动画播放的次数。

animation-direction：          规定是否应该轮流反向播放动画。

animation-fill-mode：          规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state：        指定动画是否正在运行或已暂停。

 

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

keyframes被称为关键帧，其类似于Flash中的关键帧。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes changebg {
            0% {
                background: red;
            }
            20% {
                background: blue;
            }
            40% {
                background: orange;
            }
            60% {
                background: green;
            }
            80% {
                background: yellow;
            }
            100% {
                background: red;
            }
        }
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
        .box:hover {
            animation: changebg 5s ease-out .2s;
        }
    </style>
    <div class="box">box</div>