1.字体图标
在白龙网看来，字体图标展示的是图片，本质上是字体，主要用来处理简单的图片效果，复杂的图标还是要用精灵图实现。灵活性（可修改字体、尺寸等样式）、兼容性（支持主流浏览器）、轻量级（体积小，渲染快）、使用方便（下载字体，使用图标）。
下载：登陆阿里巴巴图标库www.iconfont.cn，依次点击“素材库->官方素材库->添加入库->点击购物车->添加项目->下载本地”
引用：在网页中使用link引入iconfont.css；调用图标对应的2个类名（iconfont、icon-xxx），前面是字体类名，后面是图标对应的类名。引入成功后，可以在网页中，或者CSS文件中，通过标签或者图标的类名，使用字体样式修改图标的样式。需要注意的是，标签的优先级没有类的优化级高，因此要通过标签修改图标颜色的话，可以使用important提升标签的优先级。
如果平台没有目标图标怎么办？把SVG图片通过阿里巴巴图标库转化为图标字体即可。可以让设计师设计出SVG类型的图片，然后在阿里巴巴图标平台依次点击“上传->选择SVG图片->去除颜色提交->批量操作->选择目标图片加入购物车”，然后再下载下来，SVG图片就可以转化为图标字体了。
2.平面转换
transform可以改变元素在平面的位置、旋转、缩放等状态。参数可以有一个，也可以有两个；参数可以是正值，也可以负数；参数可以是数字，也可以是百分比，如下所示：
<style>
.father {
width: 100px;
height: 100px;
background-color: red;
transition: all 10s;
}
.father:hover {
/* 两个参数表示水平位移和垂直位移,参数可正值，也可负值 */
transform: translate(100px,100px);
transform: translate(-100px,-100px);
transform: translate(50%,60%);
transform: translate(-50%,-79%);
/* 一个参数表示水平位移 */
transform: translate(90%);
/* 也可以使用大写X/Y分别指定水平、垂直位移 */
transform: translateX(40%);
transform: translateY(56%);
}
</style>
</head>
<body>
<div class="father"></div>
</body>
(1)改变位置
A.水平垂直居中的两种写法
（A）常规写法
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
/* 父标签水平、垂直方向各移动一半 */
position: absolute;
left: 250px;
top: 250px;
/* 子标签水平、垂直方向再返回一半 */
margin-left: -50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
（B）位移写法
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
B.开门效果
开门效果涉及的知识点，一是使用伪元素添加两个子元素；二是精灵图定位取面一半的方法，即让水平方向right即可；三是水平向左向右位移100%；超出父元素宽高就隐藏。其中前3点都是在子元素上操作，第四点是对父元素操作。
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url(../bg.jpg);
overflow: hidden;
}
.box::before,.box::after {
float: left;
content: '';
width: 50%;
height: 100%;
background-image: url(../fn.jpg);
transition: all 4s;
}
.box::after {
background-position: right 0;
}
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
（2）旋转效果
A.基本用法
transform: rotate()可以控制内容进行旋转，参数可以是正数，也可以是负数，单位一定在deg，否则旋转无效果；此外，旋转必须配合过渡效果使用，否则，看不到旋转的效果。
<style>
div {
width: 300px;
margin: 0 auto;
}
img {
width: 295px;
transition: all 2s;
}
img:hover {
transform: rotate(360deg);
transform: rotate(-360deg);
}
</style>
<body>
<div><img src="./rotate.jpg" alt=""></div>
</body>
B.改变原点
transform-origin可以改变转换原点，“转换”包括位移、旋转、缩放等状态，默认转换原点是盒子中心；两个带原点水平位置、原点垂直位置两个参数，两个数数之间有空格隔开；参考可以是方位词（top/bottom/left/right/center）、像素单位数值、百分比；当然，正值负值都可以。该属性要用标签上面，不能用在hover上。
<style>
div {
width: 300px;
margin: 0 auto;
}
img {
border: 2px solid blue;
width: 295px;
transition: all 2s;
/* 通用配合方位词使用 */
transform-origin: right bottom;
transform-origin: right top;
transform-origin: left top;
transform-origin: left bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
<body>
<div><img src="./rotate.jpg" alt=""></div>
</body>
C.复合属性
transform复合属性实现多重效果：轮胎滚动
复合属性transform: translate(600px) rotate(360deg)的撰写，必须先位移，后旋转；因为旋转会改变坐标的位置，进而影响位移的效果；另外，由于CSS层叠的特性，该复合属性不能分开写，否则就同一个transform而言，后面的属性会覆盖前面的属性；此外，根据经验，如果transform有多重属性，旋转一定要放到最后面。
<style>
div {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 199px;
transition: all 15s;
}
div:hover img {
transform: translate(600px) rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="./L.jpg" alt="">
</div>
</body>
（3）缩放效果
A.基本用法
transform: scale()属性值可以是两个，分别设置水平位置与垂直位置绽放效果；也可以只设置一个属性值得，表示水平垂直等比例绽放；属性值大于1，表示放大，小于1表示缩小，等于1表示没效果。
<style>
div {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 199px;
transition: all 5s;
}
div:hover img {
transform: scale(2);
transform: scale(0.5);
transform: scale(2,0.7);
}
</style>
</head>
<body>
<div>
<img src="./L.jpg" alt="">
</div>
</body>
B.综合案例--视频播放效果
鼠标经过产品图片时，让图片上的播放按钮从无到有，从大到正常。这个案例涉及3步，一是结构布局，要注意的是要添加一个与图片是兄弟的元素，因此需要在图片的父元素中通过伪元素添加新标签；二是给伪元素添加背景按钮，同时，使用定位功能让按钮水平、垂直居中，即：父元素宽高各50%，子元素宽高各负一半；三是设置可见性与按钮绽放，即：按钮的初始值可见性为0，绽放5甚至更大；鼠标经过LI标签时，让可见性变为1，绽放变为正常1。为了效果更加逼真，可在伪元素中设置一个过渡的效果，同时在父标签.pic中设置一个超出隐藏，把按钮的绽放效果限制在父标签的宽高之中。
另外，需要注意的是，默认元素不显示的表示方法可以使用透明度opacity:0，或者display:none；相反，要显示，直接设置对应属性值为1或者block即可。一般情况下，这样的功能会涉及超出隐藏的功能，从而做出更逼真的效果。同时，也要注意，平面转换如位移、旋转、绽放等效果，一般加上过渡效果，会更佳。
如果是控制已经图片的绽放，就很简单了，不用再手动或者利用伪元素添加标签了，直接选择图片，给定初值（透明度0，绽放大/小），然后让鼠标经过大盒子时，让图片缩放即可，可见（透明度为1）即可。
<style>
* {
padding: 0;
margin: 9;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
margin: 300px auto;
width: 300px;
height: 150px;
}
.box .pic {
position: relative;
overflow: hidden;
}
.box .pic::after {
position: absolute;
left: 50%;
top: 50%;
margin-left: -29px;
margin-top: -29px;
content: '';
width: 58px;
height: 58px;
background-image: url(./play.png);
transform: scale(6);
opacity: 0;
transition: all 0.5s;
}
.box li:hover .pic::after {
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic">
<img src="./videobg.jpg" alt="">
</div>
<p>【求职必读】简历中的自我评价怎么写？……</p>
</li>
</ul>
</div>
</body>
上述案例还可以使用transform的复合属性（位移、绽放）来实现：
<style>
* {
padding: 0;
margin: 9;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
margin: 300px auto;
width: 300px;
height: 150px;
}
.box .pic {
position: relative;
overflow: hidden;
}
.box .pic::after {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -29px; */
/* margin-top: -29px; */
content: '';
width: 58px;
height: 58px;
background-image: url(./play.png);
transform: translate(-50%,-50%) scale(6);
/* transform: scale(6); */
opacity: 0;
transition: all 0.5s;
}
.box li:hover .pic::after {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic">
<img src="./videobg.jpg" alt="">
</div>
<p>【求职必读】简历中的自我评价怎么写？……</p>
</li>
</ul>
</div>
</body>
（4）渐变效果
渐变效果一般用在盒子的背景上，使用background-image的属性linear-gradient设置不同的颜色，属性值之间用逗号隔开。
<style>
div {
width: 400px;
height: 200px;
background-color: pink;
/* 多种颜色混合在一块，显示更炫酷的背景 */
background-image: linear-gradient(
pink,
blue,
green
);
/* 从透明变为半透明状态，工作是经常使用 */
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
}
</style>
</head>
<body>
<div></div>
</body>
鼠标经过图片时，逐渐出现过渡的渐变效果，思路是为图片上面添加一个图片，并设置该图片的渐变效果，并给过渡效果即可。
<style>
.box {
position: relative;
width: 300px;
height: 150px;
}
.box p {
position: absolute;
left: 20px;
top: 87px;
color: #fff;
font-weight: 700;
}
.box .mask {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 150px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.8)
);
opacity: 0;
transition: all 2s;
}
.box:hover .mask {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./videobg.jpg" alt="">
<p>transparent是什么意思,transparent怎么读,transparent翻...</p>
<div class="mask"></div>
</div>
</body>
小结：
渐变效果实现的一般思路，手动或者通过伪元素添加盒子（控制位置、设置渐变、配置初值）+hover设置变化属性；切记，使用伪元素添加元素时，千万不能少了“content”，否则是无法打印出目标结果的。一定要搞清楚，当鼠标经过谁时，你给谁加hover；你想让谁变化，就选择谁给谁添加渐变效果。
梳理：
平面转换涉及位移、旋转、缩放、渐变等效果，他们在使用时有共同的特点：分两种情况，一是，如果目标盒子已经存在，先选中盒子（是否给定初始值，根据具体需求而定）；再操作盒子（鼠标hover经过时给相应效果）。二是目标盒子不存在，那么要先新建盒子（手动添加，或者伪元素添加），再选中盒子，最后操作盒子。
初始值中可能涉及的数据有：透明度、过度、位移、旋转、缩放、渐变；
结果值中可能出现的参数有：透明度、 位移、旋转、缩放、渐变；
绽放的时候，一般会超过盒子本身的大小，这个时候，在父标签添加overflow:hidden赶出隐藏，即可展现完美效果。