字体图标
1.灵活随时修改颜色尺寸（ color font-size）
2.轻量级 体积小
3.兼容性好
4.这里推荐使用阿里图标：iconfont链接
iconfont使用方法：
在这里先说一下原理吧！ iconfont字体图标是通过伪元素，在伪元素content里面设置Unicode编码来实现的 由此可见：
<link rel="stylesheet" href="./iconfont/iconfont.css">
<title>Document</title>
<style>
a {
display: block;
width: 200px;
margin: 100px auto;
text-decoration: none;
color: #000;
}
</style>
</head>
<body>
<a href="#">
<i class="iconfont icon-cart-Empty-fill"></i>
购物车
<i class="iconfont icon-arrow-down"></i>
</a>
</body>
运行结果
我们并未给span标签设置伪元素，它却自己有了一个伪元素，而伪元素的content属性里面正是Unicode编码。
下面来介绍一下使用方式： 首先：进入网站-->www.iconfont.cn/ ， 找到想要的图标，添加至购物车，然后 下载代码，此时会看的一个名为 download的压缩包，解压，命名为iconfont（其实什么都可以，为了尊重开发者吧，哈哈哈）。准备好这一切后，看下面吧！
1、Unicode使用：
<link rel="stylesheet" href="./iconfont/iconfont.css">/* 引入字体图标样式 */
<style>
span {
/* 设置字体图标 */
font-family: iconfont;
/* 设置字体图标大小*/
font-size: 50px;
}
.i1 {
/* 设置字体颜色 */
color: red;
}
</style>
/* 复制Unicode代码 */
<span class="i1"></span>
<span></span>
2、Font-class使用:
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.s1 {
color: salmon;
font-size: 40px;
}
</style>
/*
第一个类名固定的：iconfont
第二个类名：通过html文件，直接去复制文字下方的类名即可
*/
<span class="iconfont icon-shangpin-xianxing"></span>
<span class="iconfont icon-zhongzhuanzhan-xianxing s1"></span>
3、搭配伪元素使用：
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
span::before {
/* 设置字体图标库 */
font-family: iconfont;
/* 设置字体代码  ---> \e600; */
content: "\e600";
color: orangered;
}
span::after {
font-family: iconfont;
content: "\e60b";
}
</style>
<div class="cart">
<span>购物车</span>
</div>
如果不想下载，可以添加至项目后，在线使用！
4、在线引入使用:
<!-- 在线引入字体图标，注意前面要加http: -->
<link rel="stylesheet href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"/>
<!-- 先写iconfont类名 再写图标类名 -->
<i class="iconfont icon-zhaoxiangji"></i>
平移transform使用
1、transform：2D 转换方法：子属性：translate()、rotate()、scale()、skew()
1.translate(x,y);偏移
a)： translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
b)： translateX(x)仅水平方向移动（X轴移动）。
c)： translateY(y)仅垂直方向移动（Y轴移动）。
2.rotate(ndeg):旋转n为数字
3.scale(x,y) 缩放 让元素根据中心原点对对象进行缩放 x,y表示倍数
a)： scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
b)： scaleX(x)元素仅水平方向缩放（X轴缩放）。
c)： scaleY(y)元素仅垂直方向缩放（Y轴缩放）。
4.skew(xdeg,ydeg) 倾斜变形
a)：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
b)： skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）。
c)： skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。
2、原点 transform-origin(x,y) x，y可以用百分比来表示
表示原点的横向距离和纵向距离 在没有重置transform-origin改变元素原点位置的情况下， CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。 我们可以通过transform-origin来对元素进行原点位置改变 例： transform-origin: 0 0; 以左上角为原点 50% 0; 以上中为原点 100% 50% 以右中为原点
3、transtion:过渡动画：
transition属性是一个复合属性，主要包括以下几个子属性：
1、transition-property：指定过渡或动态模拟的CSS属性。
所有的css属性用all
2、transition-duration：指定完成过渡所需的时间。
单位是s秒或者ms毫秒
3、transition-timing-function：指定过渡函数。
ease:由快到慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速再减速
4、transition-delay：指定开始出现的延迟时间。
单位是s秒或者ms毫秒。
transition:要改变的属性或all 时间;
例如：transtion:width 2s;
transtion:all 3s
4、@keyframes介绍：
keyframes被称为关键帧，。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
第一步：在css样式中，先定义动画样式
@keyframes 动画名{
from{ css样式}
to{ css样式 }
}
或者使用百分号
@keyframes 动画名 {
0%{
left: 0;
top: 0;
}
30%{
left: 800px;
top:0;
border-radius: 50%;
}
60%{
left: 800px;
top:400px;
background-color: red;
border-radius: 50%;
transform: scale(.5);
}
90%{
left: 0;
top:400px;
background-color: green;
border-radius: 50%;
}
100%{
left: 0;
top: 0;
}
}
第二步：使用animation应用动画
animation:动画名
5、animation：
组合写法（简写）：animation: myfirst 5s linear 2s infinite alternate both;
分开写
1、调用动画 animation-name: 主要是用来调用 @keyframes 定义好的动画名
2、设置动画播放时间 animation-duration: 单位：s
3、置动画时间外属性 animation-fill-mode:
none: 默认值，表示动画将按预期进行和结束，在动画完其最后一帧时，动画会反转到初始帧处
forwards: 表示动画结束后继续应用最后的关键帧的位置
backwards: 会在向元素应用动画样式时迅速应用动画的初始帧
both: 元素动画同时具有forwards和backwards效果
4、设置动画播放方式 animation-timing-function: ease(由快到慢）/ linear(匀速) / ease-in(加速) / ease-out(减速) ease-in-out(先加速再减速)
5、设置动画播放之前等待的时间 animation-delay: 单位：s
6、设置动画播放次数 animation-iteration-count: 通常设置为整数, 默认值为1; 取值为infinite，动画将会无限次的播放
7、设置动画播放方向 animation-direction: normal是默认值,动画的每次循环都是向前播放;另一个值是alternate，他的作用是，动画播放在第奇数次向前播放，第偶数次向反方向播放
8、设置动画的播放状态 animation-play-state: paused将正在播放的动画停下来; running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放
三、渐变
这里推荐使用这个网站----推荐渐变网站
<style>
.box {
width: 300px;
height: 200px;
border: 2px solid orange;
/*
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....
*/
/* 默认从上到下 */
background-image: linear-gradient(#bdc3c7, #2c3e50);
/* 左上到右下渐变 to right bottom */
background-image: linear-gradient(to right bottom, #12c2e9, #c471ed, #f64f59);
/* 90度，从上旋转90度水平，所以是从左到右 */
background-image: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
