CSS3

一、css3选择器###

1：兄弟相邻选择器 element+element
1）.element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素
2）.element1~element2 选择器 element1 之后出现的所有 element2。(两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1)

2：属性选择器 attribute
1）. E[attr]： 只使用属性名，但没有确定任何属性值；
2）. E[attr="value"]： 指定属性名，并指定了该属性的属性值；
3）. E[attr_{="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“}”不能不写；
4）. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5）. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6）. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7）. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

3：伪类选择器（切记顺序：爱恨原则）
1）. :link 伪类向未访问的链接添加特殊的样式。
2）. :visited 伪类向已访问的链接添加特殊的样式。
3）. :hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
4）. :active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

4：结构性伪类选择器
1）. :root 选择器用匹配文档的根元素。
2）. :not(selector) 选择器匹配非指定元素/选择器的每个元素。
3）. :empty 选择器匹配没有子元素（包括文本节点）的每个元素。
4）. :target 选择器可用于选取当前活动的目标元素。
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。
这个被链接的元素就是目标元素(target element)。
5）. :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
6）. :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
7）. :only-child 选择器匹配属于其父元素的唯一子元素的每个元素。
8）. n:(even、odd、ab+b)
①. E:nth-child(n) 选择器匹配属于其父元素的第n个子元素，并且这个元素还得是E元素；
②. E:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素，并且这个元素还得是E元素，从最后一个子元素开始计数。
③. :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
④. :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

二、变形与过渡###

1.认识变形-transform
在css3中transform主要包括以下几种：
旋转rotate、
倾斜skew、
缩放scale
位移translate。
1）. 语法：
a:旋转rotate transform:rotate(number,deg)
b:缩放scale transform:scale(number)
默认情况下，X轴和Y轴同时缩放
transform: scaleX(number);transform: scaleY(number);
c:倾斜skew transform:skew(number,deg)
d:位移translate transform:translate(X,Y)
e:原点transform-origin transform-origin:number% number%

2.过渡动画特效—transition
a:transition:width 3s 鼠标移上去，图片在3s的时间内过渡
b:transition-property: width/height 鼠标移上去，给宽高添加过渡效果
c:transition-delay: 3s 鼠标移上去,准备时间为后3s后开始
d:transition-duration: 20s 鼠标移上去,过渡过程中持续时间为20s

三、###

1：Animation动画
1）.定义动画Keyframes
语法：

      @keyframes animationname
             {keyframes-selector  {css-styles;}}
             animationname：定义动画的名称
             keyframes-selector：动画时长的百分比。
             from（与0%相同）                                             
             to(与100%相同)

2：Animation播放
1）.设置动画播放方式
播放次数角度. infinite：无限次数播放(不加此属性只播放一次)
播放速度角度:animation-timing-function
规定动画的速度曲线 语法：animation-timing-function: value;
value：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束
cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
2）.设置动画开始播放时间
animation-delay 属性定义动画何时开始。
语法：animation-delay: time;
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计
语法： animation-duration: time;
3）.设置动画播放方向
animation-direction 属性定义是否应该轮流反向播放动画。
语法：animation-direction: normal / alternate;
normal：默认值 动画正常播放
alternate：让动画轮流反向播放
4）.动画播放次数
animation-iteration-count ?属性定义动画的播放次数。
语法：animation-iteration-count: n/infinite;
n : 定义动画的播放次数
infinite : 定义动画无限播放
5）.动画时间外属性
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
语法：animation-fill-mode: none|forwards|backwards|both
none :默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards : 在动画结束后（由 animation-iteration-count 决定），动画体被锁定的位置在结束的位置
backwards：在动画结束后（由 animation-iteration-count 决定），动画体被锁定 的位置在开始的位置