css3动画属性 3D旋转图片 立方体特效 选择器 H5语义化标签

1CSS3动画属性:animation
animation-name 关键帧的名称

    animation-duration   动画的持续的时间
    
    animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
    
    animation-timing-function:
    
    动画的类型：
    
        linear
        
        ease
        
        ease-in
        
        step-start 
         //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方
    animation-delay  动画的延迟
    
    animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)
    
    animation-direction  运动的方向
    
            属性值：
            
                - reverse：反方向运行 （ 让关键帧从后往前执行 ）
                - 
                - alternate：动画先正常运行再反方向运行，并持续交替运行
                - 
                - alternate-reverse：动画先反运行再正方向运行，并持续交替运行
                - 
    animation-play-state 
    
            属性值：
            
                paused暂停
                
                running运动

制定动画步骤

		1.给动画制定动画帧，
		
		2.给目标添加动画帧
		
		3.动画帧的复合写法
		
			**animation:动画帧的名字 动画持续的时间 动画运动的类型  动画的延迟
			
					动画运动的次数   动画运动的方向**

2.3D旋转图片
1.图片的导入
2.动画帧的添加
3.动画帧的制作
4.让图片在3d空间中形成初始位置
5.在网页中呈现的效果
3.立方体特效实现
3.1 6个面用6个盒子
3.2 动画帧的制作{
让立方体旋转}

3.3给父盒子添加动画帧

3.4 改变6个面的位置 让其形成立方体
4.CSS3选择器{1.属性选择器2.结构性伪类选择器3.ui元素伪类选择器4.动态伪类选择器5.层级选择器}

4.1属性选择器
1: 选择符[属性名] 只要带有当前属性名就会被选中。
2: 选择符[属性名=“属性值”] 不仅制定属性名，有指定属性值
3: 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中
4: 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的
5：选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的
6: 选择符[属性名*=“属性值”] 属性值中只要包含了指定的字符就会被选中
7: 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-con ）

4.2结构性伪类选择器
如果子集标签类型一致（类名一致）的情况下：采用的是 child
1 : 选择符:first-child{ }

		        2 : 选择符:last-child{  }
		        
		        3 : 选择符:nth-child(val){}
		            val : 
		                可以是某个数值 表示第几个
		                2n 或者 even        偶数
		                2n + 1  或者 odd    奇数
		        4 : 选择符:nth-last-child(){}    倒数第几个
		        
		        5 : 选择符:only-child{}   当前子集只有一个元素的时候才会被选择
					
					
					    如果子集合标签类型不一致（类名不一致）的情况下：采用的是  of-type 
					    of-type   先确定类型，把不同类型的先剔除。剩下同类的进行第几个选择。
					
					        1 : 选择符:first-of-type{  }
					        2 : 选择符:last-of-type{  }
					        3 : 选择符:nth-of-type(val){}
					            val : 
					                可以是某个数值 表示第几个
					                2n 或者 even        偶数
					                2n + 1  或者 odd    奇数
					        4 : 选择符:nth-last-of-type(){}    倒数第几个
					        5 : 选择符:only-of-type{}   当前子集只有一个元素的时候才会被选择
					
					    拓展：
					        ：root    选择的是根元素  html
					
					        选择符:empty  当当前元素 没有任何 内容 或者 没有任何子元素的时候会被 选中

4.3 ui元素伪类选择器
E:enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked
匹配所有用户界面（form表单）中处于选中( 单选、多选 )状态的元素E
E::selection
匹配E元素中被用户选中或处于高亮状态的部分
E：checked 状态伪类：
form元素选中状态下执行的样式。
4.4动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点
E:target{ }
当元素被相关连接（锚点）指向的时候，放生css样式的改变！
4.5层级选择器
父元素>子元素{}
说明：只能选择父元素的最近的一层子元素。

    兄弟元素 + 兄弟元素{}
        说明：通过当前的元素 选择符 离她最近的 下面的兄弟元素

    
    兄弟元素 ~ 兄弟元素{}
        说明：通过当前的元素 选择符 下面的所有的兄弟元素

5.H5语义化标签
section 类似于div,section 更偏向划分区域
article 更偏向于 内容的展示
aside （在一边的，在一旁的，侧边）
header 表示内容的头部、网页的头部、头部区域
footer 表示网页的底部、内容的底部、底部区域
nav 导航连接、导航区域
figure 表示一块独立的内容
figcaption figure的标题（一般放在figure的第一位或者最后一位）
main 主体内容(IE不兼容)
hgroup
mark 高亮显示 默认北京为黄色（可以更改背景 内联元素）
time 放时间的
dialog 类似于微信的对话框 ( 默认display:none 默认定位 默认边框 )