字体图标
简述：字体图标展示出来的是图标，本质是字体，可设置颜色，大小，下划线，倾斜加粗等效果，可以处理一些简单的，颜色单一的图片，不会因放大缩小而失帧
相关网站有 阿里巴巴矢量图库，icommoon，fontawesome
本地引入
通过 link 来引入
1.挑选图标加入购物车
2.添加至项目
3.去到项目中，点击下载代码
4.解压压缩包，更改文件夹的名字为iconfont
5.放在项目文件夹中
6.利用font class的方式去引入
/* 本地引入 */
<link rel="stylesheet" href="./iconfont/iconfont.css">
在线引入
1.挑选图标加入购物车
2.添加至项目
3.复制在线的链接
4.link标签引入在线链接
5.先设置公共的类名iconfont
6.再粘贴图标的类名即可
/* 在线引入 https:超文本传输安全协议*/
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3063662_vo87eppvrfg.css">
/* html结构 */
<body>
<i class="icongont icon-xxx">
</body>
注：字体图标通常由 i / em 标签来书写
多色图标
通过 script 来引入
<script src="http://at.alicdn.com/t/font_3063662_rq0extr1edk.js"></script>
<style type="text/css">
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-10-01"></use>
</svg>
</body>
平面转换
目的：使元素实现 位移，旋转，缩放等效果
注：行内元素 设置转换无效
位移
属性：transfrom:translate(水平移动距离，垂直移动距离)
2D平移：不脱标 与相对定位类似
.box {
/* 水平为x轴，垂直为y轴 */
transfrom:translate(100px,100px);
/* 只给出一个值的情况，代表x轴移动 */
transfrom:translate(100px);
/* 若只想让y轴移动，在translate后加上Y */
transfrom:translateY(100px);
/* 百分比写法是参考着位移自身盒子进行移动 */
transfrom:translate(100%)
}
注：正值为 向右移动，向下移动
负值为 向左移动，向上移动
实现元素水平垂直居中
.fasher {
/* 父相 */
position:relative;
}
.son {
/* 子绝 */
position:absolute;
left:50%;
top:50%;
/* 往左移动自身一半，往上移动自身一半 */
transform:translate(-50%,-50%);
}
旋转
属性：transform:rotate(角度 单位“deg”)
取值：正值为顺时针，负值为逆时针
.box {
transform:rotate(180deg);
}
转换原点
属性：transform-origin
方位名词：left right top bottom
.box {
/* 更改转换原点为右上角去进行旋转 */
transform-origin:right top;
/* 如只写一个值，另一个值默认居中 */
transform-origin:right;
/* 具体像素值，从左上角开始（水平，垂直）*/
transform-origin:100px 100px;
}
多重转换
.box {
/* 先向右平移600px,再旋转一周，中间用空格分隔 */
transform:translate(600px) rotate(360deg);
}
注：属性连写时平移一定要在前，不然会改变坐标的方向
缩放
属性：transform:scale(倍数)
取值范围：1以上是放大，1以下是缩小，一般不设置负值 0-2间
.box {
/* 一个值时，代表水平垂直都放大两倍 */
transform:scale(2);
/* 仅让X轴(水平)放大两倍 */
transform:scaleX(2);
/* 仅让Y轴(垂直)放大两倍 */
transform:scaleY(2);
/* 让水平放大两倍 垂直缩小0.5 */
transform:scale(2 .5);
}
注：可添加转换原点transform-origin属性，添加在要做变化的大盒子
斜切
属性：transform:skew(角度)
.box{
/* 不写默认是X轴，左右摇摆 */
transform:skew(-30deg);
/* Y轴代表上下摇摆 */
transform:skewY(-30deg);
}
利用斜切来实现某个元素的擦亮效果
.box {
/* 父相 */
position: relative;
width: 300px;
height: 200px;
margin: 100px;
background-color: #000;
}
.box::after {
/* 子绝 */
position: absolute;
left: -120%;
/* 伪元素必写属性 */
content: "";
width: 100%;
height: 100%;
/* 将子盒子的左右颜色变为透明。中间的白色盒子变为半透明 */
background-image: linear-gradient(to right,
transparent, rgba(255, 255, 255, 0.459),transparent);
/* 根据所需效果更换角度 */
transform: skew(-30deg);
}
.box:hover::after {
left: 120%;
transition: .5s;
}
渐变
渐变是多个颜色逐渐变化的视觉效果
背景渐变的本质是背景图片
属性：background-image : linear-gradient
方向：1.从上到下(默认值) 2.角度 0deg 从下到上
.box {
/* to right 意味着去到右侧，所以是从左侧开始进行颜色的排序，所有的值均为逗号分隔 */
background-image:linear-gradient(to right,#6cf,#ff0,#ccf);
/* to right top 意味着去到右上角，所以是从左下角开始进行颜色的排序 */
background-image:linear-gradient(to right top,#6cf,#ff0,#ccf);
/* 角度以时钟为值 90deg时针指向右侧居中，意味着从左侧去到右侧 45deg时针指向右上角，意味着从左下角去到右上角*/
background-image:linear-gradient(90deg,#6cf,#ff0,#ccf);
}
渐变色文字
.box {
/* 浮动的块级元素会失去独占一行的特性，默认内容由内容撑开 */
float:left;
/* 文字设置大小 */
font-size:100px;
/* 让颜色从左侧到右侧序列显示 */
background-image:linear-gradient(to right,#6cf,#ff0,#0a0,tomato);
/* 背景裁切，让背景只显示在文字上 */
background-clip:text;
/* 目前大部分浏览器并不兼容，需要添加浏览器私有前缀 webkit为谷歌浏览器内核 */
-webkit-background-clip:text;
/* 因为文字本身有颜色，背景无法显示，需要将文字设为透明，方可显示背景 */
color:transparent;
}
属性选择器
在一些极特殊的情景下，可以对我们的代码进行优化
书写在标签名后面以 属性名=“属性值”格式书写的都为标签的属性
属性选择器符号 [ ]
1.指定属性名
/* 选中HTML结构中带有 type 的属性标签 后续设置样式 */
[type] { }
/* 选中HTML结构中带有 type="text" 的属性标签 后续设置样式 */
[type="text"] { }
2.模糊匹配
/* 选中属性值开头带有 red 的属性标签 后续设置样式 */
[class^="red"] { }
/* 选中属性值结尾带有 green 的属性标签 后续设置样式 */
[class$="green"] { }
/* 选中属性值中(不限开头结尾)带有 box 的属性标签 后续设置样式 */
[class*="box"] { }
