1. CSS现状

 

　　2. 属性选择器

 

　　选择符简介E[att] 选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]匹配具有att属性、且值以val开头的E元素E[att$=“val”]匹配具有att属性、且值以val结尾的E元素E[att*=“val”]匹配具有att属性、且值中含有val的E元素

 

　　3. 结构伪类选择器

 

　　选择符简介E:first-child匹配父元素中的第一个子元素EE:last-child匹配父元素中最后一个E元素E:nth-child（n）匹配父元素中的第n个子元素EE:first-of-type指定类型E的第一个E:last-of-type指定类型E的最后一个E:nth-of-type（n）指定类型E的第n个

 

　　nth-child（n） 注意事项：

 

　　n可以是数字，关键字和公式n如果是数字，就是选择第n个常见的关键词 even 偶数 odd 奇数常见的公式如下 （ 如果n是公式，则从0开始计算）但是 第0个元素或者超出了元素的个数会被忽略 ）

 

　　公式取值2n偶数2n+1奇数5n5 10 15 …n+5从第5个开始（包含第五个）到最后-n+5前5个（包含第5个）…

 

　　4. 伪元素选择器

 

　　选择符简介：：before在元素内部的前面插入内容：：after在元素内部的后面插入内容

 

　　注意：

 

　　before 和 after 必须有 content 属性before 在内容的前面，after 在内容的后面before 和 after 创建一个元素，但是属于行内元素。因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素伪元素和标签选择器一样，权重为 1

 

　　5. 2D转换

 

　　？转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，变形，缩放。

 

　　名称属性说明缩放scaletransform:scale（x,y）移动translatetransform:translate（x,y）旋转rotatetransform:rotate（deg）倾斜skewtransform:skew（deg）中心点origintransform-origin:（x,y）

 

　　6. 2D过渡

 

　　属性说明transition-property过渡或动态模拟的css属性 （all表示全部）transition-duration过渡所需时间transition-timing-function过渡函数transition-delay延迟时间

 

　　注意：

 

　　同时使用多个转换，其格式为：transform: translate（） rotate（） scale（） skew（）…等，其顺序会影转换的效果。 （先旋转会改变坐标轴方向）过渡缩写：transition:all 1s ease 0,2s;

 

　　7. 过渡函数

 

　　函数说明ease又快到慢 （默认值）linear速度恒速 （匀速运行）ease-in越来越快 （渐显效果）ease-out越来越慢 （渐隐效果）ease-in-out先加速在减速 （渐显渐隐效果）steps（）逐帧播放

 

　　8. 动画

 

　　动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画 ，常用来实现复杂的动画效果。

 

　　动画序列

 

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

 

　　属性描述@keyframes规定动画。animation所有动画属性的简写属性，除了animation-play-state属性。animation-name规定@keyframes动画的名称。animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0。animation-timing-function规定动画函数，默认是“ease”。animation-delay动画延迟时间，默认是0。animation-iteration-count规定动画被播放的次数，默认是1，还有infiniteanimation-direction规定动画是否在下一周期逆向播放，默认是“normal“，alternate逆播放animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"pause"。animation-fill-mode规定动画结束后状态，保持forwards回到起始backwards

 

　　9. 3D转换

 

　　我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

 

　　特点：

 

　　近大远小物体后面遮挡不可见

 

　　9.1 三维坐标系

 

　　？三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

 

　　x轴：水平向右  注意： x 右边是正值，左边是负值 y轴：垂直向下  注意： y 下面是正值，上面是负值 z轴：垂直屏幕 注意： 往外面是正值，往里面是负值

 

　　9.2 透视 perspective

 

　　？在2D平面产生近大远小视觉立体，但是只是效果二维的

 

　　模拟人类的视觉位置，可认为安排一只眼睛去看距离电脑平面的距离为视距距离视觉点越近的在电脑平面成像越大，越远成像越远

 

　　d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

 

　　z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。

 

　　9.3 3D呈现 transform-style

 

　　控制子元素是否开启三维立体环境。给父亲添加影响的是子盒子。Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启

 

　　9.4 3D移动 translate3d

 

　　？3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

 

　　9.5 3D旋转 rotate3d

 

　　？3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转，对于元素旋转的方向的判断 我们需要先学习一个左手准则。

 

　　？左手准则

 

　　左手的手拇指指向 x轴的正方向其余手指的弯曲方向就是该元素沿着x轴旋转的方向

 

　　10. 浏览器私有前缀

 

　　浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

 

　　私有前缀

 

　　1. moz-：代表 firefox 浏览器私有属性

 

　　2. -ms-：代表 ie 浏览器私有属性

 

　　3. -webkit-：代表 safari、chrome 私有属性

 

　　4. -o-：代表 Opera 私有属性

 

　　提倡写法

 

　　？-moz-border-radius: 10px;

 

　　？-webkit-border-radius: 10px;

 

　　？-o-border-radius: 10px;

 

　　？border-radius: 10px;

 

　　总结：

 

　　？1. CSS3 新增加的属性、结构伪类、伪元素选择器。

 

　　？2. CSS3 2D 移动、旋转和缩放属性。

 

　　？3. CSS3 动画设置方法。

 

　　？4. CSS3 3D 移动、旋转和缩放属性。