css3高级属性

一、css3选择器
1.first-child：选择作为第一个子元素的第一个元素，要看父元素的整体顺序
last-child：选择作为第一个子元素的最后一个元素
2.first-of-type：选择某一类元素标签中的第一个元素，不看父元素中的整体顺序
last-of-type：选择某一类元素标签中的最后一个元素
3.nth-child（）{}：选择第几位，要看父元素的整体顺序，括号中可以使数字、者数列（2n、2n+1）、even（偶数）、odd（奇数）
nth-of-type（）{}:选择某类标签中的第几位，不看父元素的只能够提顺序
4.checked：选中后的属性
(input:checked{}
<input type="checkbox’>)
5.not:非、排除
.xx x:not(.xxx){} =>选择x中除了.xxx的所有标签
6.selection：选择被用户选取的部分
xx::selection{} => xx元素中的内容被用户选取后显示{}中相对应的属性
::selection{} =>设置全局属性，应用于整个页面
7.字符串匹配属性选择器：
a.全匹配:input[name=‘user’]{}
b.以指定字符结尾：input[name$=‘user’]{}
c.以指定字符开头：input[name^=‘user’]{}
d.包含指定字符:input[name*=‘user’]{}

<input type="text" name="user">
<input type="text" name="myuser">
<input type="text" name="myusername">

二、伪元素选择器
内容之后：.xx::after{content:’ xxx’;设置xxx其他属性}
内容之前：.xx::before{content:‘xxx’;设置xxx其他属性}
产生的是行内元素，必须存在content，没有内容可以设置为空值
应用场景：
清除浮动 .clearfix::after{content:" ";display:block;height:0;clear:both;}
给有浮动的这个元素加一个clearfix的类来清除浮动
鼠标移入显示
一般方法：

		.box{
			width: 300px;
			height: 300px;
			position: relative;
			border: 1px solid #000;
		}
		.bottom{
			width:300px;
			height: 50px;
			position: absolute;
			bottom: 0;
			background: #000;
		}
		.box:hover .bottom{
			bottom:30px;
		}
		
	<div class="box">
	<div class="bottom"></div>
	</div>
	

使用after：

		.box{
			width: 300px;
			height: 300px;
			position: relative;
			border: 1px solid #000;
		}
		.box::after{
			content: "";
			height: 50px;
			width: 100%;
			position: absolute;
			display: block;
			bottom:0;
			background: #000;
		}
		.box:hover::after{
			bottom:20px;
		}

	<div class="box"></div>

三、css3过渡
过渡：transition A状态（开始状态）到B状态（结束状态）的慢慢变换的效果
1.过渡属性
2.过渡 时间 s(秒）为单位
3.过渡线型 linear：匀速；ease：慢速开始，然后变快，然后慢速结束；ease-in：以慢速开始； ease-out：以慢速结束； ease-in-out：以慢速开始和结束；cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值；
4.等待延迟时间 等待多长时间效果开始

transition：bottom 1s linear 2s
可以多组 用逗号隔开
transition：bottom 1s linear 2s，background 1s ease 2s

其中过渡时间是必须值，其属性都是可选值

有的浏览器并不支持，需要加上浏览器前缀
-webkit-transition:(苹果和谷歌）
-moz-transition:(火狐)
-ms-transition(IE)
-o-transition(欧朋)
为了让每个浏览器都支持，需要全部加上，但是对于现在的浏览器基本都支持，可以不加
设置display：none 没有过渡效果
四、css3变换特效
所有的变换都是以中心点为变换中心进行的
改变变换中心，指定某一点：
transfrom-origin：x y z；
x的取值：left、center、right、length、%
y的取值：left、center、right、length、%
z的取值：length
transfrom-origin：left top；=>左上角
1.平移
不会脱离文档流，不会影响其他元素
transform:translate(X轴，Y轴);
transform:translate(50px，50px); =>x轴平移50px，y轴平移50px
2.2d旋转
transform:rotate(角度deg）;
transform:rotate（30deg); =>顺时针旋转30度
rotate转向规则：
a.小于180°，正常顺时针，但大于180°就要注意：例设值300deg，会逆时针转60度；
b.设180°会逆时针转，-180°才顺时针；
c.设360°的倍数值不转。
3.3d旋转
transform：rotateX(角度deg）;
transform：rotateY(角度deg）;
transform：rotateZ(角度deg）;
4.缩放
transform：scale（x轴,y轴）;
transfrom：scaleX();
transfrom：scaleY();
transfrom：scaleZ();
缩放规则：
1.大于1是放大 0-1是缩小
2.负数的时候不仅有缩放的效果还要进行翻转

transform:scale(2,2) =>x和y方向都放大2倍
5.扭曲
transfrom：skew（x轴，y轴）；
transfrom：skewX（）；
transfrom：skewY（）；
transform：skew（30deg，0）; =>x轴扭曲30度
正数顺时针方向，负数逆时针方向
6.视距 透视距离
模拟眼睛跟屏幕的距离，看起来具有3d效果，值越小，距离越近
perspective：xxpx；
7.transform-style
嵌套元素是怎样在三维空间中呈现
transform-style:flat; =>以2d的方式呈现
transform-style:preserve-3d； =>以3d的方式呈现
五、css3动画
最初网页动画由flash和js做成的
flash的问题：网站素材的体积增加，文件过大；安全性不够，与后台交互可能造成数据的泄露；需要借助flashplayer插件，插件需要在网页中安装和更新
1.定义动画规则：
@keyframes 动画名称{
from{}
to{}
}
或者
@keyframes 动画名称{
0%{}
100%{}
}

@keyframes move{
			from{
				transform: translateX(0px);
			}
			to{
				transform: translateX(100px)
			}
		}

或者

@keyframes move{
			0%{
				transform: translateX(0px);
			}
			25%{
				transform: translateX(25px)
			}
			50%{
				transform: translateX(50px)
			}
			75%{
				transform: translateX(75px)
			}
			100%{
				transform: translateX(100px)
			}
		}

从开始到播放完
2.调用动画
animation：name(动画名称) duration（时间） timing-function（运动曲线） delay（延迟） iteration-count（次数）direction（反向播放）fill-mode（结束位置）

name：keyframename（需要绑定到选择器keyframe 的名称；none（无动画效果，可用于覆盖来自级联的动画）

duration：time，动画播放的时间，默认为0，表示没有动画

timing-function： linear：匀速；ease：慢速开始，然后变快，然后慢速结束；ease-in：以慢速开始； ease-out：以慢速结束； ease-in-out：以慢速开始和结束；cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值；

delay：time，动画开始前的时间，默认为0，没有延迟

iteration-count：n（定义动画播放次数的数值）；infinite（动画无限次播放）

direction：normal（默认值，动画正常播放）；alternate（动画轮流反向播放）

fill-mode：none（不改变默认行为）；forwards（动画完成后，保持最后一个属性值）；backwards（在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值）；both（向前和向后填充模式都被应用）

animation：move 2s linear 2s 3 alternate forwards；

暂停：
animation-play-state：paused；
六、css3字体图标
1.自定义字体规则
建一个myfont.css样式表

/* 自定义 字体规则 */
@font-face{
    font-family: 'myfont';
    src: url(路径);
    /* 多个路径可以逗号隔开：src:url(路径),url(路径); */
}
.myicon{
    font-family: 'myfont'
}

2.引入字体标签
方式一：

<!-- 直接引入需要用到的字体图标的特殊符号 -->
<div class="myicon">&#xe685;</div>

方式二:使用伪元素选择器通过类的方式来引入，可以达到重复利用的效果

<link rel="stylesheet"  href="myfont.css">
<div class="myicon icon-xx" ></div>

.icon-xx::after{
	content:'\e685';
}

3.直接引用网上别人定义好的字体图标库
将自己需要的字体图标库下载下来，会生成一个css样式文件，直接引用就行了

jQuery的字体图标库

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

七、jQuery常用库引用链接
1.jQuery js框架

<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
 
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 
<script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
 
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>

2.jquery-migrate（检查和恢复jQuery1.9版本中已删除或者过时api）

<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>

3.jQuery-UI（以 jQuery 为基础的开源 JavaScript 网页用户界面代码库)

<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
 
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/jquery-ui-1.11.0.css">

4.bootstrap(前端框架)

<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
 
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

5.font-awesone（图标字体库）

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

6.three(在浏览器中运行的3D引擎)

<script src="http://www.jq22.com/jquery/three.min.js"></script>

7.angular(前端js框架)

<script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>

8.animate(预设css3动画库)

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/animate-3.1.0.min.css">

9.vue（构建用户界面的渐进式框架，Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合）

<script src="http://www.jq22.com/jquery/vue.min.js"></script>