CSS3新特性

总结

1、CSS3选择器

兄弟选择器，子类选择器，结构伪类选择器，伪类选择器
:not:only-child:first-child:last-child等

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。

2、圆角与边框

圆角：border-radius： 10px 20px 30px 40px (左上、右上，右下，左下。顺时针)
边框： border: 1px solid red (边框宽度1px, 实线，边框颜色红色)

3、背景与渐变

4、过渡

5、变换

6、动画

使元素从一种样式逐渐变化为另一种样式的效果。

语法：

@keyframes 自定义的动画名称 { 动画持续时间的百分比 { 该百分比下的css样式 }}

@keyframes myAnimation{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

动画属性	描述	用法
animation	动画的简写	animation: 动画名称 动画一周期持续时间 动画播放次数
animation-name	动画名称	animation-name： myAnimation(自定义动画名称)
animation-duration	一周期所花费的时间（单位是秒或者毫秒，默认0）	animation-duration: 5s
animation-timing-function	动画速度曲线（默认：ease）	animation-timing-function：ease
animation-delay	动画开始时间	animation-delay：2s (动画2s后开始)
animation-iteration-count	动画播放次数（默认1）	animation-iteration-count：infinite（循环一直播放）
animation-direction	动画在下一周期是否逆向播放（默认：normal）	animation-direction:alternate(逆向播放)
animation-fill-mode	当动画未播放时（已完成动画或因为延迟未开始时），应用到该元素的样式