HTML5+CSS3基础知识汇总 (CSS3篇)

1. CSS现状

1. 浏览器支持程度差，需要添加私有前缀 2. 移动端支持由于PC端                            3. 不断改进中                                            4. 应用相对广泛

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	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E: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	奇数
5n	5 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中具有颠覆性的特征之一，可以实现元素的位移，旋转，变形，缩放。

名称	属性	说明
缩放	scale	transform:scale(x,y)
移动	translate	transform:translate(x,y)
旋转	rotate	transform:rotate(deg)
倾斜	skew	transform:skew(deg)
中心点	origin	transform-origin:(x,y)

6. 2D过渡

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

  注意：

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

	<!--过渡缩写-->
	 transition:过渡属性 过渡时间 过渡函数 延迟时间
	 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，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"pause"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

	animation:动画名称 动画时间 动画函数 延迟时间 播放次数 播放方向 结束后状态
	animation:myfirst 5s linear 1s infinite alternate forwards;

9. 3D转换

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

  特点：

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

   9.1 三维坐标系

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

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

   9.2 透视 perspective

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

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

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。

   9.3 3D呈现 transform-style

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

   9.4 3D移动 translate3d

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

	transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离 
	translform:translateX(100px)：仅仅是在x轴上移动 
	translform:translateY(100px)：仅仅是在Y轴上移动 
	translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）   

   9.5 3D旋转 rotate3d

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

   左手准则

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

语法：	
 	transform:rotateX(45deg)：沿着x轴正方向旋转 45度  
 	transform:rotateY(45deg) ：沿着y轴正方向旋转 45度
 	transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45度
 	transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 

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 移动、旋转和缩放属性.