CSS进阶效果实现一
前面CSS基础六小节，主要是围绕着CSS实现的基础效果而论述的，从今天开始，就打算开始和大家一起学习目前网页中通常会使用到的一些进阶效果，感谢大家支持啦！
今天介绍的主要内容是：
一、字体图标使用
二、平面转换
三、渐变
文章目录
一、前言
本进阶过程主要解决的就是网页的装饰问题，毕竟在这个讲究颜值的社会上，啥都是需要好看才能给他人留下印象的，网站也是如此；界面的美观程度直接决定了用户使用的体验感。所以，做好一个网页的装饰就显得格外重要了；
那么 进阶过程第一节 主要打算介绍的就是：字体图标的使用，元素的平面转换与背景渐变；
二、字体图标使用
字体图标：
- 展示的是图标，本质是字体；
- 处理简单的、颜色单一的图片；
使用目的：为了实现网页中简洁的图标的效果；
优点：
- 灵活性：灵活地修改样式；
- 轻量级：体积小、渲染快、降低服务器请求次数；
- 兼容性：几乎兼容所有主流浏览器；
- 使用方便：①下载字体包；②使用字体图标；
1.常用图标库
这是我在寻找网页免费图标时，经常会遇到的几个网站，毕竟好东西是需要拿出来分享的，欢迎大家选择适合自己的图标网站；
当然，为了方便使用，我大体查询和研究了以下几个网站的特点；
1.1 Iconfont（推荐）
使用步骤：
① 下载过程：【登录】→【选择图标库】→【选择图标，加入购物车】→【购物车】→【添加至项目】→【下载至本地】
② 引用过程：【文件拖入项目】→【引入样式表（iconfont.css）】→【引入图标类名（icon-xxx）】
选择图标，复制图标类名：
引入方式：
优点：图标全，风格种类多；
缺点：图标不成套，使用时需要二次修改成需要的样式；
1.2 Flaticon
使用步骤：
① 使用过程：【登录】→【搜索图标】→【选择图标】→【下载SVG】→【添加至项目文件】→【代码引入】
选择图标，下载图：
优点：图标全，风格多，样式好看；
缺点：我个人感觉没有，可能就是部分图标收费这个吧；
1.3 Iconfinder
链接地址：https://www.iconfinder.com
使用步骤：
① 使用过程：【登录】→【英文搜索需求图标】→【选择图标】→【下载图标至项目文件】→【代码引入】
选择图标，下载图标：
优点：图标质量高且全，样式美观，方便下载；
缺点：暂不支持中午搜索，七天免费试用；
1.4 remixicon（推荐）
使用步骤：
① 使用过程：【选择图标库】→【选择图标】→【复制代码】→【粘贴至body标签】
② 引用过程：【点击搜索栏右侧文件夹】→【下载Fonts文件】→【解压到项目中】→【引入样式表（iconfont.css）】
选择图标，复制图标类名：
引入方式：
优点：图标全，样式美观，下载方便；
缺点：没有发现缺点；
三、平面转换
主要包括元素的位移、旋转、缩放等效果，通常使用transform属性来实现的；
1. 位移
属性值：translate；
语法代码块：
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
- 像素单位数值；
- 百分比（参照物为盒子自身尺寸）；
注意：
①当translate()只给出一个值, 表示x轴方向移动距离；
②单独设置某个方向的移动距离：translateX() & translateY()；
方位图：
1.1 绝对定位居中
① 方法一：magin定位法
代码块实现方式：
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
缺点： 每次更改宽高的时候，都要重新定义magin值，增大项目的维护难度，同时也无法满足奇数值宽高的要求；
效果图：
② 方法二：transform定位法
代码块实现方式：
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
优点： 降低了开发难度，同时也自适应所有宽高需求；
效果图：
注意：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2. 旋转
属性值：rotate；
语法代码块：
transform: rotate(角度);/* 角度单位是deg */
取值（正负均可）
- 取值为正, 则顺时针旋转;
- 取值为负, 则逆时针旋转；
2.1 转换原点
使用transform-origin属性改变转换原点，其中默认圆点是盒子中心点；
语法代码块：
transform-origin: 原点水平位置 原点垂直位置;
取值：
- 方位名词（left、top、right、bottom、center）；
- 像素单位数值；
- 百分比（参照盒子自身尺寸计算）；
2.2 多重转换
代码样式：
transform： translate() rotate();
原理：
- 旋转会改变网页元素的坐标轴向；
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果；
- 由于CSS的样式叠层性，其两个属性值也不能单独分开写，如下
/* 层叠性 效果不显示*/
transform: translate(600px);
transform: rotate(360deg);
【后写转换】效果图：
【先写转换】效果图：
3. 缩放
属性值：scale；
语法代码块：
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧：
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放；
transform: scale(缩放倍数)；- scale值大于1表示放大, scale值小于1表示缩小；
四、渐变
主要为了达到渐变背景的效果，通常使用background-image属性来实现的；
语法代码块：
ackground-image: linear-gradient(
颜色1,
颜色2);
技巧：
- 渐变是多个颜色逐渐变化的视觉效果；
- 一般用于设置盒子的背景；
各类网站常用样式：
实现代码（transparent意为透明）：
background-image: linear-gradient(
transparent,
rgba(0,0,0, .6));
总结
以上内容主要介绍了CSS的进阶属性，其主要目的仍然是处于对网页实现装饰效果的阶段，虽然它们的存在并不是必要的，但是没有它们，一个网页是很难实现用户良好的观感效果的，所以CSS的进阶属性对我们开发网页来说依然是很重要的部分；
以上就是所要介绍的CSS进阶学习的第一节内容，后续即将更新CSS进阶的学习目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！